Javascript学习笔记-定时器

简介

JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。

Timeout

setTimeout

• 功能：指定某个函数或某段代码，在多少毫秒之后执行
• 语法：var timerId = setTimeout(func|code, delay)
• 参数
  
  1. Javascript语句字符串或者函数：要被执行的代码
  2. 时间间隔（毫秒）：指示从当前起多少毫秒后执行第一个参数
• 返回值：一个整数，表示定时器的编号，以后可以用来取消这个定时器

• 实例

  //Javascript语句字符串setTimeout("alert('5 seconds!')", 5000);//函数setTimeout(function() {    alert('5 seconds!');}, 5000)

clearTimeout

• 功能：取消指定的定时任务，已经开始执行的任务无法取消（？）
• 参数：定时事件id，即setTimeout执行后的返回值
• 返回值：undefined

• 实例：

  var timedTaskId = setTimeout("alert('5 seconds!')", 5000);clearTimeout(timedTaskId);

---

Interval

setInterval

• 功能：按照指定的周期（以毫秒计）来调用函数或计算表达式
• 语法：setInterval(code,millisec[,”lang”])
• 参数
  
  • code：必需，要调用的函数或要执行的代码串
  • millisec：必须，周期性执行或调用 code 之间的时间间隔，以毫秒计
• 返回值：一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值

• 示例：

   //Javascript语句字符串setInterval("alert('5 seconds!')", 5000);//函数setInterval(function() {    alert('5 seconds!');}, 5000)

clearInterval

• 功能：取消由 setInterval() 设置的定时任务
• 语法：clearInterval(id_of_setinterval)
• 参数
  
  • id_of_setinterval：由 setInterval() 返回的 ID 值
• 返回值：undefined

• 示例

  var timedTaskId = setInterval("alert('5 seconds!')", 5000);clearInterval(timedTaskId);

---

运行机制

参考《JavaScript 标准参考教程》的定时器的运行机制

---

常见问题

带循环调用的定时任务

可以通过创建一个函数循环重复调用setTimeout来实现类似setInterval的功能，示例如下所示：

function showTime() {    var today = new Date();    alert( " The time is: " + today.toString());    setTimeout( " showTime() " , 5000 );}showTime();

上面展示的代码实现的功能，可以使用setInterval实现代码如下所示：

function showTime() {    var today = new Date();    alert( " The time is: " + today.toString());}setInterval("showTime()", 5000);

转载：这两种方法可能看起来非常像，而且显示的结果也会很相似，不过两者的最大区别就是，setTimeout方法不会每隔5秒钟就执行一次showTime函数，它是在每次调用setTimeout后过5秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完，那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout

回调函数传参

1. setTimeout可以在第二个参数后加入更多的参数，这些参数依次作为回调函数调用时的参数使用，但是IE9.0及以下版本不支持。示例：
   function add(a, b) {
   console.log(a + b);
   }
   setTimeout(add, 1000, 1, 1);
2. 匿名函数调用回调函数传参。示例：
   function add(a, b) {
   console.log(a + b);
   }
   setTimeout(function() {
   add(1, 1);
   }, 1000);
3. 使用bind方法，把多余的参数绑定在回调函数上面，生成一个新的函数驶入setTimeout。示例：
   function add(a, b) {
   console.log(a + b);
   }
   setTimeout(add.bind(null, 1, 1), 1000);
4. 自定义setTimeout，使用apply方法将参数输入回调函数

注：setInterval的回调函数的参数问题同setTimeout

回调函数作用域问题

定时器默认的回调函数在执行时的作用域指向全局环境，而不是定义该回调函数的的对象。解决办法：
1. 匿名函数内部使用回调函数的归属对象来调用，或者使用apply来修改作用域
2. 使用bind方法，将回调函数的作用域绑定在指定对象上

取消所有的定时任务

setTimeout和setInterval函数，都返回一个表示计数器编号的整数值，将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。setTimeout和setInterval返回的整数值是连续的，也就是说，第二个setTimeout方法返回的整数值，将比第一个的整数值大1。利用这一点，可以写一个函数，取消当前所有的setTimeout。示例：

(function() {  var gid = setInterval(clearAllTimeouts, 0);  function clearAllTimeouts() {    var id = setTimeout(function() {}, 0);    while (id > 0) {      if (id !== gid) {        clearTimeout(id);      }      id--;    }  }})();

注：本段摘自《JavaScript 标准参考教程》-定时器篇

setTimeout(f,0)

通过学习定时器的运行机制可以知道，f不会立即执行，它必须等到当前脚本的同步任务和“任务队列”中已有的事件，全部处理完后，才会执行。更多请参考《JavaScript 标准参考教程》-定时器的setTimeout(f,0)含义

时间间隔的最大值

32位数字，超过了为溢出，直接取0

---

应用

输入框防抖动

参考《JavaScript 标准参考教程》-定时器的clearTimeout实际应用

setTimeout(f,0)

根据setTimeout(f,0)的特性，它有很多应用场景，更多请参考《JavaScript 标准参考教程》-定时器的setTimeout(f,0)应用

---

参考文献

• w3school-JavaScript 计时
• w3school-HTML DOM setInterval() 方法
• w3school-HTML DOM clearInterval() 方法
• 阮一峰-定时器