防抖和节流

防抖和节流都是防止一段时间内某一函数被频繁触发，避免大量计算导致的页面卡顿。

不同的是，防抖是将多次执行变为最后一次执行，节流是多次执行变为规定时间内只执行一次。

防抖

在事件被触发n秒后再执行回调函数，如果这n秒内又被触发，则重新计时

应用

• 输入搜索联想，用户在不断输入值时
• 按钮点击：收藏，点赞，心标等
• window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖让其只触发一次

代码

//非立即执行版
function debounce(fun, delay) {
  return function (args) {
    let that = this;
    let args_ = args;
    clearTimeout(fun.timer);
    fun.timer = setTimeout(function () {
      fun.apply(that, args_);
    }, delay);
  };
}

节流

规定在一个单位时间内，只能触发一次回调函数。如果这个单位时间内触发多次函数，只有一次生效。

应用

• 鼠标不断点击触发，点击事件在规定时间内只触发一次
• 监听滚动事件，用节流来判断，是否滑动到底部自动加载更多

代码

//时间戳+定时器版
//第一次触发能响应，结束触发也能有响应
//第一次触发能响应，结束触发也能有响应
function throttle(fun, delay) {
  let timer = null;
  let previous = 0;
  return function (args) {
    let now = Date.now();
    let remaining = delay - (now - previous);
    let that = this;
    let args_ = args;
    if (remaining <= 0) {
      fun.apply(that, args_);
      previous = Date.now();
    } else {
      timer = setTimeout(function () {
        fun.apply(that, args_);
      }, remaining);
    }
  };
}