「手写题」2、防抖节流的理解和实现

防抖

防抖就是函数的延迟调用。当函数被调用的时候，函数不会立即执行，而是等待延迟时间为0 才会执行，如果在这个延迟时间内，再次调用了该函数，那么该函数的延迟时间就会被刷新。重新等待直到延迟时间为0的时候再执行。

特点：短时间内多次触发，最终在停止触发后的某个指定时间执行一次函数————只执行一次

// 函数防抖的实现
function debounce(fn, wait) {
  var timer = null;

  return function() {
    var context = this,
      args = arguments;

    // 如果此时存在定时器的话，则取消之前的定时器重新记时
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    // 设置定时器，使事件间隔指定事件后执行
    timer = setTimeout(() => {
      fn.apply(context, args);
    }, wait);
  };
}

节流

节流就是防止在一定时间内多次重复调用函数。如果在一定时间内，多次重复的调用一个函数，那么函数只会立即执行第一次调用的函数，之后的调用在规定的时间内是不会生效的。

特点：短时间内多次触发，即使触发仍在继续也可以根据指定时间触发一次函数————至少执行一次

// 函数节流的实现;
function throttle(fn, delay) {
  var preTime = Date.now();

  return function() {
    var context = this,
      args = arguments,
      nowTime = Date.now();

    // 如果两次时间间隔超过了指定时间，则执行函数。
    if (nowTime - preTime >= delay) {
      preTime = Date.now();
      return fn.apply(context, args);
    }
  };
}