使用 setTimeout, clearTimeout 实现 setInterval, clearInterval

实现思路

setInterval 和 setTimeout 都可以实现延时执行函数的效果,相比之下 setInterval(计时器) 可循环调用函数.既然两者最大的差别在于循环调用,那么只要利用setTimeout实现循环调用的效果,即可。在封装函数函数内部可以通过递归实现。

完整代码

let timeMap = {}; // 定义一个全局变量,用来存放setTimeout函数
let id = 0; // 定义一个全局id,表示函数在对象中的位置
function mySetInterval (fn, time = 1000) {
    // 更新id
    let timeId = id;
    id++;
    const interval = () => {
        // 执行传入的函数
        fn();
        // 递归调用自己
        // 更新 timeMap[timeId]为最新的数据
        timeMap[timeId] = setTimeout(interval, time);
    };
    timeMap[timeId] = setTimeout(interval, time);
    // 返回当前函数存放的id
    return timeId;
}
function myClearInterval (id) {
    // 根据id清空函数,并删除当前函数,释放空间
    clearTimeout(timeMap[id]);
    delete timeMap[id];
}
let a = mySetInterval(() => {
    console.log(1000);
}, 1000);
setTimeout(() => {
    myClearInterval(a);
}, 5000);
// let b = setInterval(() => {
//     console.log(2000);
// }, 2000);
// console.log(111, b);