6.2 定时器，节流和防抖

定时器timer，向任务队列添加定时任务。

setTimeout

• 用法：

  timerId = setTimeout(func|code, delay);

• 第一个参数是回调函数，第二个参数delay，不写默认为0ms，再后面是作为回调函数的参数。
• 回调函数是对象的方法时的this指向

  var x = 1;
  var obj = {
  x: 2,
  y: function () {
    console.log(this.x);
  }
  };
  //没有绑定this
  setTimeout(obj.y, 1000) // 1
  //绑定this
  setTimeout(obj.y.bind(obj), 1000) // 2

setInterval

• 用法与setTimeout完全一致，区别是它会每隔一段时间执行一次，无限循环。

  var i = 1
  var timer = setInterval(function() {
  console.log(2);
  }, 1000)

• setInterval指定每次执行的间隔，不考虑任务本身消耗的时间，因此会导致每次执行的间隔不固定，可以用下面方式固定间隔时间：

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

  clearTimeout和clearInterval

  清除定时器，每次设置定时器，定时器会返回一个整数表示他的编号

  var id1 = setTimeout(f, 1000);
  var id2 = setInterval(f, 1000);
  clearTimeout(id1);
  clearInterval(id2);
  //
  function f() {}
  setTimeout(f, 1000) // 编号10
  setTimeout(f, 1000) // 编号11
  setTimeout(f, 1000) // 编号12

  防抖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);
  };
  }

  节流throttle

  节流：一段时间内，只执行第一次触发的事件的回调函数，直到计时结束。

  function throttle(fn, delay){
     let canUse = true
     return function(){
         if(canUse){
             fn.apply(this, arguments)
             canUse = false
             setTimeout(()=>canUse = true, delay)
         }
     }
  }
  const throttled = throttle(()=>console.log('hi'))
  throttled()
  throttled()