JavaScript 如何使用 setTimeout 模拟实现 setInterval？

使用 setTimeout 模拟实现 setInterval 的基本思路是：在 setTimeout 的回调函数中再次调用 setTimeout，这样可以不断地延迟执行相同的操作，形成类似 setInterval 的效果。

不过，值得注意的是，使用这种方法可以更精确地控制下一次执行的时间，因为你可以在当前任务结束后再设置下一次执行，这样就不会受到之前任务执行时间的影响。

下面是一个模拟 setInterval 的示例函数 simulateSetInterval：

javascript
function simulateSetInterval(callback, interval) {
    // 用来清除定时器的函数，在simulateSetInterval返回的对象上调用clear方法即可停止。
    let timer = {
        clear: function() {
            clearTimeout(this.timeoutId);
        }
    };

    // 这是一个递归函数，用于模拟重复间隔执行
    const repeat = function() {
        callback();
        timer.timeoutId = setTimeout(repeat, interval);
    };

    // 开始执行
    timer.timeoutId = setTimeout(repeat, interval);

    // 返回一个控制对象，可以用来停止间隔执行
    return timer;
}

// 使用 simulateSetInterval 的例子
let counter = 0;
const exampleTimer = simulateSetInterval(() => {
    console.log('Hello World!');
    counter++;
    if (counter >= 5) {
        exampleTimer.clear();
        console.log('Timer stopped after 5 iterations.');
    }
}, 1000);

在这个例子中，simulateSetInterval 函数接受一个回调函数 callback 和一个间隔时间 interval。函数内部定义了一个递归的 repeat 函数，它首先执行传入的 callback，然后使用 setTimeout 来延迟下一次执行 repeat 函数本身，从而达到周期执行的效果。返回的 timer 对象包含一个 clear 方法，可以用来清除定时器，停止进一步的执行。

这种模拟实现方式的好处是，它更加灵活，可以根据任务的实际执行时间动态调整间隔，而 setInterval 在一些情况下可能会导致任务之间的间隔不准确，尤其是在某些任务执行时间较长时。使用 simulateSetInterval，下一次任务的开始时刻总是在当前任务完成后按照设定的间隔进行计时。