JavaScript 计时器

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

关于计时器要记住的最重要的事情是，指定的时间间隔表示何时将定时器的代码添加到队列，而不是实际何时执行代码。

WindowTimers 接口介绍

WindowTimers

  • 接口包含了四个用来设定和清除定时器的实用方法
  • 这个接口没有定义也没有继承任何属性
  • 事实上，类型为 WindowTimers 的对象并不存在，它一般由 window 对象实现

[ W3C 文档 ]

interface WindowTimers {
  long setTimeout(in any handler, in optional any timeout, in any... args);
  void clearTimeout(in long handle);
  long setInterval(in any handler, in optional any timeout, in any... args);
  void clearInterval(in long handle);
};
Window implements WindowTimers;
  • WindowTimers.setTimeout()： 在指定的延迟时间之后 调用一个函数 或 执行一个代码片段.（不推荐使用后者）
var timeoutID = window.setTimeout(func,delay[,param1,param2,...])

// timeoutID 是此操作的唯一辨识符，可以作为参数传给clearTimeout()
// func 你想要在delay毫秒之后调用的函数
// delay 每次延迟的毫秒数，若未传入此参数，则delay取默认值 0
// param1,param2,...  其他参数，IE 9 及 IE 9- 不支持这种传参用法
// 传入其他的参数的用法同下面 setInterval() 的用法
window.clearTimeout(timeoutID);
var intervalID = window.setInterval(func,delay[,param1,param2,...])

// intervalID 是此重复操作的唯一辨识符，可以作为参数传给clearInterval()
// func 你想要重复调用的函数
// delay 每次延迟的毫秒数
// param1,param2,...  其他参数

如果未传入 delay 参数，则使用默认参数（10 毫秒） [ w3c 文档 ]

If timeout is less than 10, then increase timeout to 10.

与 setTimeout 一样，除了前两个参数，setInterval 方法还可以接受更多的参数，但它们会传入回调函数

setInterval(
  function() {
    for (let i = 0; i < arguments.length; i++) {
      console.log(arguments[i]);
    }
  }, // function
  3000, // delay
  "Hello word", // param1
  1234, // param2
  [12, 13, "here", true], // param3
  { age: 21, man: true } // param4
);

// 浏览器控制端将会一直打印出下面的数据：
// Hello word
// 1234
// [12, 13, "here", true]
// {age: 21,man: true}
// ...
window.clearInterval(intervalID);

参考资料

【文章】JavaScript 的计时器的工作原理（推荐）