资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/setTimeout和setInterval

setTimeout和setInterval

SnaiLiu / 1002人阅读

摘要：一个页面在浏览器显示出来至少需要个线程，分别是引擎，渲染，事件触发。其中事件触发是独立于其他个执行的，而和是相互排斥的，也就是说同一个时间二者只有一个在工作。

作为DOM本身十分重要的2个异步执行函数，初学者感觉这个很不好理解，我简单写一写我的理解

setTimeout (func, millisec);
setInterval(func, millisec);

这两个方法在形式看起来很相似，第一个参数是异步执行的函数（用字符串表示的代码也可以，不过很少这样用），第二个参数是时间（ms）。但其实这两个函数还是有很大区别的

说的通俗一点，setTimeout()让电脑一定时间以后再执行一段代码，执行完了就拉倒，例如下面这段代码：

setTimeout("alert("5 seconds!")", 5000); //5秒后弹出提示框

再看看setInterval()，不同的在于每过一段时间会重复执行一段代码。比如在浏览器中输出一个时间，每一秒变化一下。

var clk = document.getElementById("clk"); //clk是一个div
setInterval(function(){
  var t = new Date();
  clk.innerHTML= t;
}, 200);
//每隔200ms显示一次时间,200ms会看着比1000ms更稳定一些

运行上面这个代码，如果你得到的时间不准确，那一定是你的电脑时间错了。
好了，总结一下：

setTimeout(func, m); //m毫秒后执行函数func，只执行一次（下文会讲怎么让它中止）
setInterval(func, m); //每隔m毫秒执行函数func，一直执行下去（下文会讲怎么让它停下来）

对于setInterval()的用途可能还比较好理解，但是对于setTimeout()，这里有一个问题——我们为什么要让一段代码过一段时间在执行？

这里就产生了一个很重要的概念，在本文一开始就提到过——异步！什么是异步？
举个通俗一点的例子：比如现在有烧水和擦桌子两件事，如果你一定要用热水擦桌子，那你就必须先等着水开了，才能擦桌子，这个就是同步；如果你不在乎用什么水擦桌子，那一般人都会先烧水，在烧水的同时就开始擦桌子了，这个就是异步。

对于计算机而言，这个逻辑和正常生活不一样：同时执行就是异步，先后执行就是同步！当然这是一种简单的理解，并不严谨，毕竟在计算机内部计时器脉冲、操作系统进程、网络通信中都有同步和异步的概念。

有了异步执行这个概念，那小编可以负责的说setTimeout()和setInterval()都是异步执行的。其实2015年出的ES6在异步这里下了很大的功夫，提出了async function(){}、Promise对象、Generator函数、Object.observe函数等很多新概念，不过这里不谈这些概念，但理解这些异步概念绝不能像这篇文章里面简单粗暴！！！

好了现在可以回答上面那个问题了，我们之所以会用到setTimeout()和setInterval()更多还是为了异步执行代码，以此提高代码的执行速度。到此这两个方法的就讲完了。。。等等！！！方法？方法会不会有返回值呀！
没错，这两个函数都有返回值，至于这个值是个什么并不重要，我们只需要知道这个值能干什么，我们给上面的那段代码添点东西：

var clk = document.getElementById("clk"); //clk是一个div
var time = setInterval(function(){
  var t = new Date()
  clk.innerHTML= t;
}, 200);

var btn = document.getElementById("btn"); //btn是一个按钮
btn.onclick = function(){
  clearInterval(time);
};

这段代码我们获得了setInterval() 的返回值，把返回值传给了clearInterval()方法，这样实现了点击按钮结束的对应setInterval()的反复调用，终于它可以停下来了。

同样的方法，利用clearTimeout() 方法可取消由 setTimeout() 函数定义的异步操作，我们如法炮制得到一个取消延迟事件的按钮（当然，如果这个事件已经执行了再点这个按钮就没意义了）：

var alt = setTimeout("alert("5 seconds!")", 5000); //5秒后弹出提示框
var btn = document.getElementById("btn"); //btn是一个按钮
btn.onclick = function(){
  clearTimeout(alt);
};

如果用setInterval和setTimeout调用的函数是一个有参数的函数怎么办？

function f(a, b){/*...*/}
var num = 2;
setTimeout("f(num, 3)", 1000);  //第一种方法
setTimeout(function(){fun(num, 3);}, 1000);  //第二种方法

这一下，setTimeout()和setInterval()已经理解了，看它们相似点其实也不少，否则怎么会容易被搞混呢？其实我们可以使用setTimeout()实现setInterval()的功能，就像下面一段代码：

function mySetInterval(code, ms){
  if(typeof code === "string")  //不要忘了第一个参数可以是字符串
    eval(code);
  else if(typeof code === "function")
    code();
  else throw new Error("code cannot be run");  //当第一个参数传入不是字符串或函数时报错
  setTimeout(function(){
    mySetInterval(code, ms);  //递归调用
  },ms);
}
mySetInterval("document.write("helloWorld!
")", 1000);//调用方法不变，第一个参数也可以是函数

这里值得强调的是eval()并不是什么好东西，它在全局运行，对字符串并不能有效检查(会让JSLint失效)，还会调用编译器降低效率，同时带来安全隐患。所以尽量不要用eval()，也不要给setTimeout和setInterval传入字符串，因为系统也是用eval实现这个功能的。
这段代码只是用这样一种方式表示setTimeout()和setInterval()的关系，便于读者理解。并不表示这样做有什么好，更不表示编译器也这么实现setInterval()，因为这样的递归效率不高占用资源却不少，而且它没法停止。

如果你已经掌握了上面的内容，那么下面可以更深入的理解一下异步了。

以setTimeout为例：

//alert(1);
//setTimeout("alert(2)", 0);
//alert(3);
//alert(3);

上面这段代码会如何输出呢？实际输出是：1 -> 3 -> 3 ->2，为什么会这样，难道setTimeout(func, 0)不是立即执行？没错。想理解这个问题，必须简单理解浏览器是如何处理异步函数的。

一个页面在浏览器显示出来至少需要3个线程，分别是js引擎，GUI渲染，事件触发。其中事件触发是独立于其他2个执行的，而js和GUI是相互排斥的，也就是说同一个时间二者只有一个在工作。好了，这说明js引擎是单线程执行的，当第二行的setTimeout执行以后，js引擎把func(第一个参数)放入异步队列(浏览器再开一个线程)，然后继续向下执行，此后，当js引擎空闲下来才会把异步执行的结果插入原来js线程中。是不是这样呢，我们让代码说话：

    var finish = true;
    setTimeout(function(){
        finish = false;  //1s后，改变isEnd的值
    }, 0);
    while(finish);
    alert("finished");  //永远不会执行

上方这段代码是个死循环，就因为js引擎不能空闲下来，异步函数也就没有执行。下面这个实际问题可以很好的理解这个：




  
  



  
    
click "first" button to calculate.

  

  
  
click "second" button to calculate.

我们用了一很大的循环模拟一个耗费时间的计算。

分析一下：第一个按钮看不到calculating。由于js引擎的事件处理也是异步的，而for循环是同步的，设置文字为calculating的语句被放在了for循环结束，因为只有此时js才有空闲处理异步队列，for结束了以后，文字被设置为calculating，继而变为Done，所以我们看不到这个过程了，在代码中debugger的位置停一下，这个过程就清晰的呈现了出来。

为了解决这个问题，第二个按钮引入了setTimeout这样，异步事件click执行，函数内第一个语句被送入队列，而后setTimeout里那个匿名函数被送入队列，此时js引擎有空闲，于是输出calculating，异步队列移动，继续执行calc，这样就是我们想看到的结果了。

不足之处请多指点。

私有云 idc机房托管 setInterval setTimeout javascript settimeout js定时器SetInterval

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

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

相关文章

  • process.nextTick() 、setTimeout()、setInterval() 运行机

    摘要：注意如果主逻辑的代码执行时间已经超过了第二个参数设置的时间，那么等运行到该回调函数时，它会忽略掉这个时间，并立即执行。如果某一个进行大量的计算，那么它就会阻塞在当前的回调函数中，等待该计算完成后，再执行下一个的回调函数。 setTimeout() ​ JavaScript是一个单线程的语言，也就是说它同一时间只能执行一段代码，接下来我们通过两个例子说明一下单线程语言和多线程语言的...

    lscho 评论0 收藏0

  • setTimeout和setInterval的使用

    摘要：不过两者各有各的应用场景。方法实际上，和的语法相同。这意味着如果函数的主体部分需要秒钟执行完，那么整个函数则要每秒钟才执行一次。不过还是有办法可以终止和函数的执行。 var intervalProcess = setInterval(alert(GOAL!), 3000); 这个变量命名可以在实际代码中采用 这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过...

    noONE 评论0 收藏0

  • JS忍者秘籍中的定时器机制详解

    摘要：设置和清除定时器直接引用忍者秘籍中的图片注意定时器的时间间隔设为，也会有几毫秒的延迟。以上参考资料忍者秘籍第章驯服线程和定时器 showImg(https://segmentfault.com/img/remote/1460000015353524?w=1024&h=681); 前言 前段时间刚看完《JS忍者秘籍》，虽说是15年出版的，有些东西是过时了，但像对原型链、闭包、正则、定时器...

    keelii 评论0 收藏0

  • 定时器

    摘要：提供定时执行代码的功能，叫做定时器，主要由和这两个函数来完成。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。上面代码中，回调函数不会再执行了，因为两个定时器都被取消了。 JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。 setTimeout()...

    Nino 评论0 收藏0

  • js计数器方法setInterval()、clearInterval()、setTimeout()和

    摘要：方法描述周期性地调用一个函数或者执行一段代码。方法可取消由方法设置的。语法详解是该延时操作的数字此随后可以用来作为方法的参数。需要注意的是，不支持第一种语法中向延迟函数传递额外参数的功能。该值标识要取消的延迟执行代码块。 方法 描述 setInterval 周期性地调用一个函数(function)或者执行一段代码。 clearInterval 取消掉用setI...

    keithxiaoy 评论0 收藏0

发表评论

登陆后可评论

0条评论

SnaiLiu

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<