JavaScript 分析 -- 定时器和节流反分流

一、定时器

js的定时器主要有setTimeout和setInterval两个，下面我们分别讲讲。

1. setTimeout

setTimeout()设置任务延迟多久之后才执行，该函数第一个参数可以是可执行语句（字符串形式）或者一个函数，第二个参数是延迟的毫秒数（若省略则默认为0），后续的参数则代表第一个函数的参数。

// 下面两者一样
setTimeout('console.log(666)',1000);
setTimeout(function() {
  console.log(666);
}, 1000);

setTimeout('console.log(666)'); // 相当于setTimeout('console.log(666)', 0);

setTimeout(function(a, b) {
  console.log(a + b); // 3
}, 1000, 1, 2);

其中有两点要注意（具体原因可以看这篇文章）：

• 函数里面的this指向的是全局，因为赋值的是函数的地址，执行的时候是从任务队列取出来在主执行栈中全局调用。

var obj = {
  y: function () {
    console.log(this);
  }
};
setTimeout(obj.y, 1000) // window

• 定时器设置的毫秒数是理想情况下多少毫秒后执行，但实际情况下是可能多于该毫秒数之后才执行。因为虽然数完秒就放到任务队列，但要等主执行栈为空了才会去调用这些任务队列的回调函数。

// 下面的虽然写了1s后执行输出666，但实际却要3s后才执行输出666
setTimeout('console.log(666)', 1000);
function execTime(t) {
  var start = Date.now();
  while(Date.now() - start < t) {}
}
execTime(3000);

2. setInterval

setInterval与setTimeout用法和注意点基本差不多，他主要用于设置时间间隔，每隔多少毫秒之后重复执行任务，直到浏览器关闭或手动清除。

实际上，两次函数执行的间隔时间也不是所设定的毫秒数，而是小于执行的毫秒数的，比如设置了100ms，第一次函数执行用了10ms，那么间隔90ms之后第二次执行函数；如果第一次函数执行用了110ms，那么函数执行完毕之后会立马执行第二次函数。那如果要固定间隔时间执行某函数，可以用setTimeout来模拟。

var timer = setTimeout(function f() {
  // ...
  timer = setTimeout(f, 2000);
}, 2000);

3. 清除定时器

setTimeout和setInterval生成的都是计数器编号，从0开始，将对应的编号传入clearTimeout和clearInterval就可以清除对应的定时器。

var a = 0;
var timer = setInterval(function() {
  console.log(a++); // 输出0、1就停了
  if (a===2) {
    clearInterval(timer);
  }
}, 1000);

当浏览器的标签页打开之后，每生成一个定时器都是从上一个编号开始累加上去的，第一个定时器编号是0，第二个是1，如此类推，所以清除所有的定时器可以这么实现。

var timer = setTimeout(function(){}, 0);
while(timer >= 0) {
  clearTimeout(timer);
  timer--;
}

二、节流和防抖

通过定时器，我们可以实现函数节流和函数防抖。

1. 函数节流

函数节流指的是在规定时间内重复触发不重复执行，以节流。如监听页面滚动到底的时候加载新的数据，但往往会连续触发滚动事件导致连续发起几次请求，此时就需要函数节流。

function throttle(fn, delay) {
  var isFinished = true;
  return function() {
      if (!isFinished) return;
      isFinished = false;
      var that = this, args = arguments;
      setTimeout(function() {
          fn.apply(that, args);
          isFinished = true;
      }, delay);
  };
}
document.onscroll = throttle(function() { /* 请求数据 */ }, 20);

正如上面的代码，函数节流主要是锁的思想。先执行一次，当上一个执行完毕才解锁isFinished = true，否则锁住isFinished = false代码不让执行。

2. 函数防抖

函数防抖指的是规定时间内重复触发只执行最后一次，以防止频繁触发带来的抖动。如输入框搜索时，如果每当输入框有一个字变化就搜索，一是对频繁请求对服务器压力大，二是前端也会频繁的闪现搜索的结果，用户体验不好。所以一般都会有个延时，等用户输入延迟一段时间后确定不再输入再进行搜索。

function debounce(fn, delay) {
    var timer = null;
    return function() {
        clearTimeout(timer);
        var that = this, args = arguments;
        setTimeout(function() {
            fn.apply(that, args);
        }, delay);
    };
}
document.querySelector('input').onchange = debounce(function() { /* 请求数据 */ }, 200);

函数防抖的主要思想是定时器清除。规定时间内再次触发，则上一个未被执行的定时器被清除，再开启新的定时器，直到最后一次触发。

上面写的是两个简单版本的函数节流和函数防抖，主要是为了讲解两者的主要思想，也好进行区分：

• 节流是先执行一次，然后过规定时间之后才能再执行。防抖是过了规定时间之后没再触发，最后执行一次。
• 节流是锁的思想，防抖是清除定时器的思想。
• 注意最后返回结果都是函数，而且要注意函数中的this指向是返回函数的this。