前端setTimeout 来实现 setInterval

114 阅读1分钟

可以使用 setTimeout 来模拟 setInterval 的功能。通过在 setTimeout 的回调中再次调用 setTimeout,可以实现定时重复执行某个函数的效果。以下是一个示例:

示例代码

function customSetInterval(callback, interval) {
    let timerId;

    function start() {
        timerId = setTimeout(() => {
            callback();
            start(); // 递归调用以实现循环
        }, interval);
    }

    start(); // 启动定时器

    return {
        clear: () => clearTimeout(timerId) // 提供清除定时器的方法
    };
}

// 使用示例
const interval = customSetInterval(() => {
    console.log('每隔 1000 毫秒执行一次');
}, 1000);

// 停止定时器的示例
setTimeout(() => {
    interval.clear();
    console.log('定时器已停止');
}, 5000); // 5秒后停止

代码解释

  1. customSetInterval 函数: 接受一个回调函数和时间间隔作为参数。
  2. start 函数: 使用 setTimeout 来调用回调函数,并在回调执行后再次调用 start,实现循环。
  3. timerId: 用于存储当前的定时器 ID,以便后续可以清除定时器。
  4. 返回对象: 提供一个 clear 方法,用于清除定时器。
  5. 使用示例: 创建一个定时器,每隔 1000 毫秒执行一次,并在 5000 毫秒后停止定时器。

总结

通过递归调用 setTimeout,可以实现类似于 setInterval 的效果。这种方法的优点是可以在每次执行后动态调整下次执行的时间间隔,提供了更大的灵活性。