为什么要用setTimeout代替setInterval

博客参考点击，需要注意的是这两个定时器并不是定时执行，一般会延后一点点，秒数所表示的是，在一定时间后，被放入到队列中

setInterval的缺陷

使用 setInterval某些间隔会被跳过不执行
- 当使用 setInterval时，仅当队列中没有该定时器的任何其他代码时，才会将定时器代码加入到队列中
- 可以这么理解：每个setTimeout产生的任务会直接push到任务队列中；而setInterval在每次把任务push到任务队列前，都要进行一下判断(看上次的任务是否仍在队列中)
可能多个定时器会连续执行

如果使用setTimeout模拟setInterval,就会规避上面两个缺点

setTimeout模拟setInterval

写上需要一定时间执行的代码，如第一部分
复制粘贴模拟的代码，即第二部分
第三部分可写可不写，但是如果写的话需要写在模拟的函数体内，他表示满足了一定的条件之后清除定时器

      // 第一部分let index = 1const fn1 = () => {console.log("number = ", index++)}// 第二部分const simulateInterval = (callback,interval) => {let timerId = null;function fn() {callback();// 第三部分 ：条件if(index === 5){return clearTimeout(timerId)}const prevTimmerId = timerId;timerId = setTimeout(fn, interval);clearTimeout(prevTimmerId);}return setTimeout(fn, interval);}const intervalId = simulateInterval(fn1,1000)

此外还需要注意，如果有条件进行计时器的停止的话，是否需要将条件进行重置
且如果定时器内是异步请求的话，全局的条件也要在启动 simulateInterval 函数时进行重置

本质

实质上，使用setTimeout来模拟setInterval的本质是一个递归调用
递归调用 simulateInterval 内部的自定义的 fn 函数
而条件就是递归出口

项目中用setTimeout代替setInterval相关推荐

JavaScript 中的 setTimeout 和 setInterval 方法
有时您不希望函数立即运行.您希望它重新执行,甚至在特定时间间隔后重复运行.JavaScript 为我们提供了两种实现方法: setTimeout 和 setInterval.下面,我们将来理解这两个方 ...
javascript requestAnimationFrame 解决 setTimeout、setInterval 时间不准的方法。
javascript requestAnimationFrame 解决 setTimeout.setInterval 时间不准的方法. 取代 setInterval <!DOCTYPE html ...
setTimeOut()和setInterval()的用法
setTimeOut()和setInterval()的用法 setTimeOut(function(){},1000); 在特定时间之后调用函数,只调用一次 setInterval(function( ...
iOS 项目中用到的一些开源库和第三方组件
iOS 项目中用到的一些 iOS 开源库和第三方组件分享一下我目前所在公司 iOS 项目中用到的一些 iOS 开源库和第三方组件, 感谢开源, 减少了我们的劳动力, 节约了我们大量的时间, 让我们有 ...
setTimeout和setInterval实现定时器的区别
这两个方法都能够用来实现在一个固定时间段之后去运行JavaScript.只是两者各有各的应用场景. 方法实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要 ...
js中计时器setTimeout、setInterval、requestAnimationFrame区别
转载自:https://www.cnblogs.com/xiaohuochai/p/5777186.html 本文仅用于作为学习笔记计时器一直是javascript动画的核心技术.而编写动画循环的关 ...
setTimeout和setInterval的使用
(节选自JavaScript精粹) 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript.不过两者各有各的应用场景. 方法实际上,setTimeout和setInterval的语 ...
JavaScript———从setTimeout与setInterval到AJAX异步
setTimeout与setInterval执行首先我们看一下以下代码打印结果 1 2 3 4 5 6 7 console.log(1); setTimeout(function() { conso ...
js的事件循环机制：同步与异步任务（setTimeout，setInterval）宏任务，微任务（Promise，process.nextTick）...
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环事件循环 ...
setTimeout和setInterval你真的了解吗?
setTimeout和setInterval这两个函数, 大家肯定都不陌生, 但可能并不是每个用过这两个方法的同学, 都了解其内部的实质, 甚至可能会错误的把两个实现定时调用的函数理解成了类似thre ...

项目中用setTimeout代替setInterval

为什么要用setTimeout代替setInterval

setInterval的缺陷

setTimeout模拟setInterval

本质

项目中用setTimeout代替setInterval相关推荐

最新文章

热门文章