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事件上等。

定时器setTimeout和setInterval