夏日博客

A-A+

JavaScript的setTimeout与setInterval定时机制介绍

2016年01月14日 前端设计 暂无评论 阅读 5 views 次

文章来介绍一下关于JavaScript的setTimeout与setInterval定时执行机制用法，有需要了解的同学可以参考本文章哦,代码如下:

  1. showTime();  
  2. function showTime()  
  3. {  
  4.     var today = new Date();  
  5.     alert("The time is: " + today.toString());  
  6.     setTimeout("showTime()", 5000);  
  7. }  

一旦调用了这个函数,那么就会每隔5秒钟就显示一次时间,代码如下:

  1. setTimeout(function() {  
  2.     alert('你好!');  
  3. }, 0);  
  4. setInterval(callbackFunction, 100);  

认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行.这里设成0毫秒,理所当然就立即被执行了.同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行深信不疑!但随着JavaScript应用开发经验不断的增加和丰富,有一天你发现了一段怪异的代码而百思不得其解,代码如下:

  1. div.onclick = function(){  
  2.         setTimeout(function() {  
  3.                 document.getElementById('inputField').focus();  
  4.         }, 0);  
  5. };  

既然是0毫秒后执行,那么还用setTimeout干什么,此刻,坚定的信念已开始动摇.直到最后某一天,你不小心写了一段糟糕的代码:

  1. setTimeout(function() {  
  2.         while (true) {  
  3.         }  
  4. }, 100);  
  5. setTimeout(function() {  
  6.         alert('你好!');  
  7. }, 200);  
  8. setInterval(callbackFunction, 200);  

第一行代码进入了死循环,但不久你就会发现,第二,第三行并不是预料中的事情,alert问候未见出现,callbacKFunction也杳无音讯!

如果对计时函数不加以处理,那么setInterval将会持续执行相同的代码,一直到浏览器窗口关闭,或者用户转到了另外一个页面为止,不过还是有办法可以终止setTimeout和setInterval函数的执行,当setInterval调用执行完毕时,它将返回一个timer ID,将来便可以利用该值对计时器进行访问,如果将该ID传递给clearInterval,便可以终止那段被调用的过程代码的执行了,具体实现如下:

  1. settimeout_setinterval3.js (excerpt)  
  2. var intervalProcess = setInterval("alert('GOAL!')", 3000);  
  3. var stopGoalLink = document.getElementById("stopGoalLink");  
  4. attachEventListener(stopGoalLink, "click", stopGoal, false);  
  5. function stopGoal()  
  6. {  
  7.     clearInterval(intervalProcess);  
  8. }  

只要点击了stopGoalLink,不管是什么时候点击,intervalProcess都会被取消掉,以后都不会再继续反复执行intervalProcess,如果在超时时间段内就取消setTimeout,那么这种终止效果也可以在setTimeout身上实现.

总结:

实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。

不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。

标签：

给我留言