一、参数及介绍
- setTimeOut
- setInterval
二、工作原理
- 前言：JS是单线程运行的
- setTimeOut
- setInterval
- - 情况一：fn运行时间 ≤ 时间间隔，即多数情况
  - 情况二：fn运行时间 > 时间间隔，即一些异常情况
三、setTimeOut弥补setInterval的不足
四、本文参考文章

一、参数及介绍

setTimeOut

setTimeOut (fn, delayTime)

【功能】：在一定时间延迟之后开始执行一个给定的函数
【参数1】：fn将要执行的函数，函数类型或者字符串类型
【参数2】：delayTime要延迟的时间，Number类型，单位为毫秒
【返回】：一个id值

setInterval

setInterval (fn, interval)

【功能】：每隔时间段interval就调用fn一次
【参数1】: fn将要执行的函数，函数类型或者字符串类型
【参数2】: interval要延迟的时间，Number类型，单位为毫秒
【返回】：一个id值

二、工作原理

前言：JS是单线程运行的

因为 JS 是单线程的，在某一个特定时间点只能执行某一个特定的任务，所以会阻塞其它任务执行。对于耗时的任务（例如网络请求，I/O操作等），没有必要等待他们执行完后才继续后面的操作。在这些任务完成前，JavaScript 完全可以往下执行其他操作，当这些耗时的任务完成后则以回调的方式执行相应处理。这些就是 JavaScript 与生俱来的特性：异步与回调。
信息参考自：关于JavaScript单线程的一些事

setTimeOut

【工作原理】

JS是单线程执行，当执行到setTimeOut代码时开始计时，在当到达间隔时间delayTime 之后，把回调函数fn放到事件队列。
真正的运行时间取决于主线程何时调用事件队列中fn。（当主线程空闲下来才会去事件队列取出fn函数执行）

运行到 setTimeOut（时间点）| delayTime（时间段） | 调用函数fn（时间点）| fn执行时段（时间段）

setInterval

【工作原理】：
在执行到 setInterval 代码时，会开始计时，到达间隔时间 interval 之后，将判断：目前有没有此定时器的实例？

如果没有，则将 fn 加入到事件队列中
如果有，那么不会将回调函数 fn 加入到事件队列中，防止之后连续调用 fn（即非定时调用）
弊端：导致一些间隔被跳过

情况一：fn运行时间 ≤ 时间间隔，即多数情况

Mon 06Mon 13Mon 20fn运行时间时间间隔 fn运行时间时间间隔 fn运行时间时间间隔时间线

情况二：fn运行时间 > 时间间隔，即一些异常情况

Mon 06Mon 13Mon 20fn运行时间时间间隔 fn运行时间时间间隔 fn运行时间时间间隔时间线

为什么会这样？

JS 为单线程，在一个时间段内全力只作一件事。即执行函数 fn。
在 fn 运行的时，定时器没有能力终止其的运行
当 fn运行时间 > 时间间隔 interval 时，间隔时间到了，但是程序还没有执行完，那也要老老实实的等着函数执行完。

弊端？

实际间隔是fn运行的时间，并非设定的时间间隔 interval，时间不精确。

三、setTimeOut弥补setInterval的不足

setTimeout(function fn(){// 1. 业务逻辑console.log('Hi')// 2. 链式调用 setTimeout(fn, interval);
}, interval);

链式调用 setTimeout()
每次函数执行的时候都会创建一个新的定时器。
第二个setTimeout()调用当前执行的函数，并为其设置另外一个定时器。
这样做的好处是，在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔。
而且，它可以保证在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行。

四、本文参考文章

排名不分先后

为什么setTimeout()比setInterval()稳定
setInterval和setTimeout的缺陷和优势分析
关于JavaScript单线程的一些事

setTimeout还是setTimeInterval？相关推荐

js中的setTimeout与setTimeInterval
setTimeout与setTimeInterval均为window的函数,使用中顶层window一般都会省去,这两个函数经常稍不留神就使用错了. setTimeout内的函数先不执行,隔一段时间后再 ...
setTimeOut() 和 setTimeInterval()
setTimeOut()は.指定された時間「待ってから」指定された動作を行う関数です. setTimeOut():等待指定时间,执行指定方法. setTimeInterval()は.指定された時間「間 ...
setTimeout 与 setTimeinterval的区别
这两天一直在ajax的东西,昨天做一个小例子的时候发现了setTimeout这个函数,以前只知道setTimeinterval,发现这两个函数是有一些差别的.在网上搜了一下,作为备忘就转贴一下了. w ...
前端页面倒计时+自动跳转功能（setTimeout和setTimeInterval两种实现）
setTimeout实现  <p><span id="time"></span>秒后自动跳转到百度< ...
setTimeout与setTimeinterval的使用
转自:http://www.cnblogs.com/qiantuwuliang/archive/2009/06/20/1507304.html 这两个方法都可以用来在固定的时间段后去执行一段javas ...
setTimeout与setTimeinterval的使用-2020年10月23日
setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码. 这两个函数的区别是: s ...
手写模板——前端总结
获取近一年时间 const dateFormat = 'YYYY-MM-DD'; const dateRange = {"6month": [moment().subtract(6 ...
前端 30 问：愿你能三十而立
前言: 金三银四了,如果你正在经历工作调整,那么建议你一定要收藏起来,这是一份预防互联网寒冬的必备指南~ 1.输出的结果是什么? 怎么改变循环1输出结果变成循环2的打印结果 for(var i = 0 ...
深入解析js中的函数
写在前面由于词语匮乏,本文继续沿用"深入解析xxx"这个俗套的命名,但是是真的很深入(你要信我啊).如果本文对你有用,欢迎收藏,如果喜欢我的文章,欢迎点赞和关注专栏. 函数可以说 ...

setTimeout还是setTimeInterval？

目录

一、参数及介绍

setTimeOut

setInterval

二、工作原理

前言：JS是单线程运行的

setTimeOut

setInterval

情况一：fn运行时间 ≤ 时间间隔，即多数情况

情况二：fn运行时间 > 时间间隔，即一些异常情况

三、setTimeOut弥补setInterval的不足

四、本文参考文章

setTimeout还是setTimeInterval？相关推荐

最新文章

热门文章

setTimeout还是setTimeInterval？

目录

一、参数及介绍

setTimeOut

setInterval

二、工作原理

前言：JS是单线程运行的

setTimeOut

setInterval

情况一：fn运行时间 ≤ 时间间隔 ，即多数情况

情况二：fn运行时间 > 时间间隔 ，即一些异常情况

三、setTimeOut弥补setInterval的不足

四、本文参考文章

setTimeout还是setTimeInterval？相关推荐

最新文章

热门文章

情况一：fn运行时间 ≤ 时间间隔，即多数情况

情况二：fn运行时间 > 时间间隔，即一些异常情况