定时器setTimeout和setInterval

本文更具JavaScript标准参考教程-阮一峰 整理笔记

timeout翻译为超时， interval翻译为间隙
setTimeout()设置超时调用
setInterval()设置间歇调用

setTimeout()

用法： setTimeout(func, delay)表示delay毫秒后运行func函数，func是回调函数
func可以换成一段代码。

console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
// 1
// 3
// 2

若func有参数，那么在delay后面添加参数， 表示func的参数

console.log(1);
setTimeout(function (a){console.log(a)},1000, 2);//2为函数的实参， a为形参
console.log(3);
// 1
// 3
// 2

参数delay可以省略， 省略时默认为0即：

setTimeout(func)
// 等同于
setTimeout(func, 0)

如果回调函数是对象的方法，那么setTimeout使得方法内部的this关键字指向全局环境，而不是定义时所在的那个对象

var x = 1;

var obj = {
  x: 2,
  y: function () {
    console.log(this.x);
  }
};

setTimeout(obj.y, 1000) // 1

我们有两种方法解决， 一种是在匿名函数中调用obj.y

setTimeout(function () {
  obj.y();
}, 1000);
// 2

另一种是使用bind方法绑定

setTimeout(obj.y.bind(obj), 1000) //2

setInterval()

这个方法的用法和setTimeout()方法的用法一致， 区别是setInterval()是每隔一段时间执行一次， 而setTimeout()方法只执行一次
setInterval()指定的是“开始执行”的间隔， 这意味着它不会管函数运行的时间。 当下一次函数开始执行时， 若前一次函数还未运行完， 下一次的函数还是会照样触发。
要想确保两次函数执行的时间间隔相等， 可以使用setTimeout()来代替：

setTimeout(function f() {
  // ...
  setTimeout(f, 2000);
}, 2000);//两次执行时间间隔2秒

clearTimeout(), clearInterval()

setTimeout()都会返回一个整数值， 每一次调用setTimeout()会返回一个比原来大1的整数值， 即返回的值是递增的。
有了这个整数值， 我们可以通过clearTimeout()的方法清楚对应的定时器；

var id = setTimeout(f, 1000);
clearTimeout(id);   //清楚定时器

对于setInterval()也会有一个整数返回值， 它和setTimeout()返回值的使用方法一样。

var id = setInterval(f, 1000);
clearInterval(id);  //清楚定时器

debounce函数

有时我们不希望回调函数被频繁调用， 那么可以通过上面的方法制作防抖动函数

function debounce(fn, delay){
  var timer = null; // 声明计时器
  return function() {
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

这样我们就可以设置定时器的最小执行时间了

运行机制

setTimeout和setInterval的回调函数， 必须等到本轮事件循环中的所有同步任务都执行完才开始执行。

setTimeout(someTask, 100);  //0.1s后执行
veryLongTask(); //这是同步任务， 执行事件非常常

上面的代码中veryLongTask要是在0.1s后还没有执行完， 那么setTimeout函数只能一致等到veryLongTask执行完才会开始执行

setTimeout(func, 0)

setTimeout(func, 0)并不一定会立刻执行， 因为这个方法会等到本轮所有的同步任务执行完才会执行。我们可以理解为它会在下一轮事件循环一开始就执行。
这个方法可以应用在冒泡事件上， 也可以应用在keypress事件上等。

setTimout()模拟setInterval()

setInterval()函数时间歇调用函数, 即每隔一段时间就会执行回调函数.

var duration = 100
setInterval(function run() {
    console.log(1)
}, duration)

当setInterval()函数一旦执行, 那么就无法更改duration的值了.

setTimeout()函数是超时调用, 且它只会调用一次. 我们可以用它来模拟setInterval()函数

var duration = 100
setTimeout(function run() {
    console.log(2)
    setTimeout(run, duration)
}, duration)

这样我们就可以控制duration了.
这可以应用在需要控制动画速度的场景里.