函数防抖和节流

在js事件中有一些会持续触发，例如resize、scroll、mousemove。以mousemove为例，看看函数频繁执行的情况。

const box = document.getElementById('box');
let cnt = 1;
function add(){
  box.innerText = cnt++;
}
box.addEventListener('mousemove', add);

可以看到

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kEtDz6ws-1584861613294)(./src/5/1.gif)]

页面上数据变化的非常快，当函数内逻辑比较复杂时，就可能发生卡顿。所以，接下来看看防抖和节流是如何解决这个问题的。

防抖

所谓防抖就是指，事件触发后n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。

防抖函数分为立即执行版和非立即执行版。

非立即执行版

function debounce(callback, wait) {
  let timeout = null;
  return function() {
    let ctx = this;//保存上下文
    let args = arguments;//保存参数
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(function() {
      callback.apply(ctx, args);
    }, wait);
  };
}

假设设定时间为200ms，效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7b4tZ1eg-1584861613296)(./src/5/2.gif)]

可以看到，在触发mousemove事件的瞬间，函数并没有执行，而是在事件停止的200ms之后才执行。如果200ms内事件再次被触发，则重新开始计算时间。

立即执行版

function debounce(callback, wait) {
  let timeout = null;
  return function() {
    let ctx = this; //保存上下文
    let args = arguments; //保存参数
    let runNow = !timeout;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(function() {
      timeout = null;
    }, wait);
    if (runNow) callback.apply(ctx, args);
  };
}

时间依然是200ms，效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-whTG7y8p-1584861613297)(./src/5/3.gif)]

立即执行版会在触发事件的瞬间执行函数，如果200ms内再次触发，则重新开始计时。

节流

节流是指连续触发的事件在n秒内指执行一次。

节流实现有两种版本，定时器版，时间戳版。

时间戳版

function throttle(callback, wait) {
  let previous = 0;
  return function() {
    let now = Date.now();
    let context = this;
    let args = arguments;
    if (now - previous > wait) {
      callback.apply(context, args);
      previous = now;
    }
  };
}

设置时间500ms，效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3utAxhNL-1584861613298)(./src/5/4.gif)]

不论你触发事件的频率有多么高，函数总是按500ms一次的频率执行。

定时器版

function throttle(callback, wait) {
  let timeout = null;
  return function() {
    let ctx = this;
    let args = arguments;
    if (!timeout) {
      timeout = setTimeout(function() {
        timeout = null;
        callback.apply(ctx, args);
      }, wait);
    }
  };
}

设置时间为500ms，效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PFEfDwu5-1584861613300)(./src/5/5.gif)]

可以发现，时间戳版在触发事件的瞬间不会立即执行函数，而是在触发后500ms才执行，并且在事件停止时，500ms后还会执行一次函数。

[外链图片转存中…(img-PFEfDwu5-1584861613300)]

可以发现，时间戳版在触发事件的瞬间不会立即执行函数，而是在触发后500ms才执行，并且在事件停止时，500ms后还会执行一次函数。