javascript两种方式实现自定义setInterval

两种方式实现setInterval（setTimeout和requestAnimationFrame）

• 引言
• 使用setTimeout方式实现
• • setTimeout实现方式的缺点和改进
• 使用requestAnimationFrame方式实现
• 进一步改进
• 结语

引言

最近在学习基础js时，突然想起了之前关于setInterval的问题，再有些时候并不可靠，所以有推荐使用setTimeout来实现setInterval，所以也想自己实现一个，关于setInterval的问题这里就不多讨论，已经有很多文章再说了，这里主要介绍自己的实现过程

使用setTimeout方式实现

这里我主要参考了下文的实现方式

setTimeout代替setInterval的方案.

利用setTimeout加递归实现，主要实现代码如下，这里只截图了核心的代码部分，如果对你有帮助请尊重原创去链接里查看。其优点是可以随时停止，是把定时器id绑定到了回调方法上，很多解决方法是没有该功能的。实现interval的方式也是利用到了arguments.callee方法

setTimeout实现方式的缺点和改进

该方法缺点也很明显，就是其核心代码arguments.callee在严格模式下无法使用，因此我尝试用普通递归的方式进行替换，改进后的代码如下

function interval({ func: fn, interval: i = 1000, isClear: cls = false }) {
	if (cls) {
        fn.timerId && clearTimeout(fn.timerId);
        return;
    }
    else {
        let self = this;
        fn.timerId = setTimeout(function f() {
            fn.timerId = setTimeout(f, i);
            fn.call(self, fn.timerId);
        }, i);
    }
}
           

使用requestAnimationFrame方式实现

后来我在查阅资料时又看到了另一种实现方式，就是利用requestAnimationFrame来实现，其原理和实现方式如下文，里面不仅有setInterval还有setTimeout的实现，总的来说，该方法更为高效，不过该方法只支持浏览器环境，不支持node，因为requestAnimationFrame是window的方法

自己实现一个高性能的setTimeout和setInterval函数.

进一步改进

我后续又尝试在此基础上增加两个比较常用的功能，一个是延时执行，有时候使用interval可能需要加个延时，比如5s后开始执行，每间隔1s执行一次。还有一个就是开启interval后立即执行一次，分别在两种实现方式上加以改进，最终代码如下

/**
 * 实现interval（利用requestAnimationFrame）
 * @param {*} func 回调函数
 * @param {*} param1 参数 
 * interval-执行间隔   
 * isClear-是否清除   
 * delay-延时执行时间
 * immediate-是否在开始时立即执行一次（如果有delay则在delay之后）,本次回调的函数内不可暂停该循环 
 */
function startIntervalByAnimation(func, { interval: i = 1000, isClear: cls = false, delay: d = 0, immediate: imm = false } = {}) {
    // 验证回调函数是否存在
    if (func && typeof func === "function") {
        // 清除定时器
        if (cls) {
            cancelAnimationFrame(func.timerId);
        } else {
            // 延时控制
            setTimeout(function () {
                let startTime = Date.now();
                imm && func.call(this, func.timerId); // 立即执行第一次的控制
                // 开启循环
                (function loop() {
                    func.timerId = requestAnimationFrame(loop);
                    if (Date.now() - startTime >= i) {
                        func.call(this, func.timerId);
                        startTime = Date.now();
                    }
                })();
            }, d);
        }
    } else {
        throw new Error("no callback function");
    }
}

/**
 * 实现interval（利用setTimeout）
 * @param {*} func 回调函数
 * @param {*} param1 参数 
 * interval-执行间隔   
 * isClear-是否清除   
 * delay-延时执行时间
 * immediate-是否在开始时立即执行一次（如果有delay则在delay之后）,本次回调的函数内不可暂停该循环 
 */
function startIntervalByTimeout(func, { interval: i = 1000, isClear: cls = false, delay: d = 0, immediate: imm = false } = {}) {
    // 验证回调函数是否存在
    if (func && typeof func === "function") {
        // 清除定时器
        if (cls) {
            func.timerId && clearTimeout(func.timerId);
        } else {
            let self = this;
            // 延时控制
            setTimeout(function () {
                imm && func.call(self, func.timerId); // 立即执行第一次的控制
                // 开启循环
                func.timerId = setTimeout(function f() {
                    func.timerId = setTimeout(f, i);
                    func.call(self, func.timerId);
                }, i);
            }, d);
        }
    } else {
        throw new Error("no callback function");
    }
}


// 测试使用代码
// 内部停止
let id1 = 0;
function test1(timerId) {
    console.log("执行代码");
    id1++;
    if (id1 > 5) {
        console.log("停止执行");
        clearTimeout(timerId);
    }
}
startIntervalByTimeout(test1, { interval: 1000 });

// 外部停止
function test2(timerId) {
    console.log("执行代码");
}
startIntervalByTimeout(test2, { interval: 1000 });
// 停止
setTimeout(() => {
    startIntervalByTimeout(test2, { isClear: true });
}, 5000);
           

结语

最后要再次感谢两篇文章的作者，结合他们的实现方式最终得出了我自己想要的自定义interval方法，如果哪里写的有问题请大家指正，望与诸位共同进步