资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JavaScript定时器 setTimeout 和 setInterval 异同

JavaScript定时器 setTimeout 和 setInterval 异同

Michael_Lin / 854人阅读

摘要：若是函数，则只需要写函数名，可以不加双引号和括号必需。返回值返回整型定时器也就是这个的唯一标示符。取消定时器利用取消运行机制性能性能较优稳定性更稳定链式调用实现作用域相关经典面试题为每个定时器处理函数创建不同的变量副本。

setTimeout setInterval
描述 实现的是根据给定的时间间隔，每隔一段时间调用一次函数或执行一次代码 实现的是根据给定的时间，在经过该时间之后只调用一次函数或执行一次代码
语法 setTimeout (callback, delay, arg1, ..., argn) setInterval (callback, interval, arg1, ..., argn)
参数 callback 必需。要调用的函数或要执行的代码串。（若是函数，则只需要写函数名，可以不加双引号和括号）
delay / interval 必需。在执行代码前需等待的毫秒数。
arg1, ..., argn 可选。给回调函数的传参。
返回值 返回整型定时器id,也就是这个setTimeout/setInterval 的唯一标示符。
取消定时器 利用 clearTimeout(id) 取消
运行机制
性能 性能较优
稳定性 更稳定 
</>复制代码 
  1. var interval = 3 * 1000,
  2.     count = 0;
  3. function someOpration(){
  4.     var startTime = new Date();
  5.     console.log(startTime.toLocaleString() + " " + startTime.getMilliseconds());
  6.     var sum = 0;
  7.     for(let i=0; i < 2000000000; i++){
  8.         sum += i;
  9.     }
  10.     var endTime = new Date();
  11.     console.log(endTime.toLocaleString() + " " + endTime.getMilliseconds());
  12.     var duration = endTime - startTime;
  13.     console.log(duration);
  14. }

setTimeout 链式调用

</>复制代码 
  1. function slow1(){
  2.     if(count < 5){
  3.         someOpration();
  4.         count = count + 1;
  5.         setTimeout(slow1, interval);
  6.     }
  7. }
  8. setTimeout(slow1, interval);

setInterval 实现

</>复制代码 
  1. var interval = 3 * 1000,
  2.     count = 0;
  3. function slow2(){
  4.     if(count < 5){
  5.         someOpration();
  6.         count = count + 1;
  7.     } else {
  8.         clearTimeout(timerId);
  9.     }
  10. }
  11. var timerId = setInterval(slow2, interval)

setTimeout作用域相关经典面试题 
</>复制代码 
  1. for (var i = 1; i <= 2; i++) {
  2.     setTimeout(function() { alert(i) }, 100);
  3. }
  4. // 3
  5. // 3
为每个定时器处理函数创建不同的“i”变量副本。比如这样 
</>复制代码 
  1. for (var i = 1; i <= 2; ++i){
  2.   doSetTimeout(i);
  3. }
  4. function doSetTimeout(i) {
  5.   setTimeout(function() { alert(i); }, 100);
  6. }
可简写为 
</>复制代码 
  1. for (var i = 1; i <= 2; i++) {
  2.     setTimeout(function(j) { console.log(j) }, 100, i);
  3. }
GPU云服务器 云服务器 js定时器SetInterval js定时器setTimeout javascript settimeout javascript 定时器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99024.html

相关文章

  • 浏览器与NodeJS的EventLoop异同，以及部分机制。

    摘要：浏览器与的异同，以及部分机制有人对部分迷惑，本身构造函数是同步的，是异步。浏览器的的已全部分析完成，过程中引用阮一峰博客，知乎，部分文章内容，侵删。 浏览器与NodeJS的EventLoop异同，以及部分机制 PS：有人对promise部分迷惑，Promise本身构造函数是同步的，.then是异步。---- 2018/7/6 22：35修改 javascript 是一门单线程的脚本...

    jubincn 评论0 收藏0

  • JavaScript 定时器

    摘要：定时器方法相关方法有四种。返回值返回值是一个正整数，表示定时器的编号。这个值可以传递给来取消该定时器。使用方法很简单只有一个参数，该参数为您要取消定时器的标识符。用法很简单当代码运行到这行的时候，会取消所设置的定时器。 简单介绍在JavaScript中定时器有两个 setInterval() 与 setTime...

    王伟廷 评论0 收藏0

  • JS 异步的实现

    摘要：由于引擎同一时间只执行一段代码这是由单线程的性质决定的，所以每个代码块阻塞了其它异步事件的进行。这意味着浏览器将等待着一个新的异步事件发生。异步的任务执行的顺序是不固定的，主要看返回的速度。 我们经常说JS是单线程的，比如node.js研讨会上大家都说JS的特色之一是单线程的，这样使JS更简单明了，可是大家真的理解所谓JS的单线程机制吗？单线程时，基于事件的异步机制又该当如何，这些知识...

    sihai 评论0 收藏0

  • 细说 Javascript 拾遗篇（四） : setTimeout 和 setInterval

    摘要：当间隔时间设置较小时，将会导致回调函数堆积。处理可能阻塞的代码最简单且最可控的方式就是在回调函数内部使用函数。但是很明显，由于指定最大值的限制，还会有定时器没有被清除掉。另外，尽量避免使用函数，从而避免可能导致的回调函数堆积现象。 由于 Javascript 是异步的，因此我们可以通过 setTimeout 和 setInterval 函数来指定特定时间执行代码。 function ...

    wangjuntytl 评论0 收藏0

发表评论

登陆后可评论

0条评论

Michael_Lin

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<