夏日博客

A-A+

setTimeout()与setInterval()定时器与区别

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

JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感,代码如下:

  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干什么, 此刻, 坚定的信念已开始动摇.

setTimeout()与setInterval()方法的区别

计时器setTimeout()与setInterval()是原生JS很重要且用处很多的两个方法,但很多人一直误以为是相同的功能:间隔时间重复执行传入的句柄函数,但实际上,并非如此,既然JS给出了两个不同的命名,肯定有其迥异之处.

先来看看两者JS手册及英文词典上的解释:

JS手册»setTimeout() : 用于在指定的毫秒数后调用函数或计算表达式;

英文释义»timeout() : 超时；暂时休息；工间休息;

JS手册»setInterval() : 按照指定的周期(以毫秒计)来调用函数或计算表达式. 会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭;

英文释义»interval() : 间隔；间距；幕间休息;

不难看出, 只要我们仔细体会JS手册及命名释义, 就能很容易的区分开两者的区别. 简单的说, 两才的区别在于, setTimeout()方法是在等待指定时间后执行函数, 且只执行一次传入的句柄函数. setInterval()方法是每指定间隔时间后执行一次传入的句柄函数,循环执行直至关闭窗口或clearInterval().

例,代码如下:

  1. var timeout=function(){  
  2.  alert('等待2s后弹出,仅此一次!在等待时间内clearTimeout可停止执行!')  
  3. }  
  4. var interval=function(){  
  5.  alert('每2s循环弹出,直至clearInterval或关闭窗口!')  
  6. }  
  7. var input=document.getElementsByTagName('input');  
  8. var clearTimeoutFun=null;  
  9. var clearIntervalFun=null;  
  10. input[0].onclick=function(){  
  11.  clearTimeoutFun=setTimeout(timeout,2000);  
  12. }  
  13. input[1].onclick=function(){  
  14.  clearTimeout(clearTimeoutFun);  
  15. }  
  16. input[2].onclick=function(){  
  17.  clearIntervalFun=setInterval(interval,2000);  
  18. }  
  19. input[3].onclick=function(){  
  20.  clearInterval(clearIntervalFun);  
  21. }   
标签：

给我留言