javascript两种方式实现自定义setInterval

最新推荐文章于 2023-09-18 09:31:48 发布

攻城狮杨

最新推荐文章于 2023-09-18 09:31:48 发布

阅读量996

点赞数 1

分类专栏： javascript数据结构与算法 h5相关文章标签： javascript

本文链接：https://blog.csdn.net/u014050961/article/details/117320902

版权

本文探讨了使用setTimeout和requestAnimationFrame实现自定义setInterval的方法，包括各自的优缺点和改进策略。通过递归和arguments.callee的替代方案，以及利用requestAnimationFrame的高效特性，创建更灵活和可控的定时器。此外，还介绍了如何添加延时执行和立即执行的功能。

摘要由CSDN通过智能技术生成

两种方式实现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的方法