函数防抖&函数节流

什么是函数防抖 / 节流

• 函数防抖和函数节流：优化高频率执行js代码的一种手段，可以让被调用的函数在一次连续的高频操作过程中只执行一次，优化性能

函数防抖 / 节流的应用

• oninput / onmousemove / soncroll / onresize 等事件

函数防抖 / 节流的区别

• 函数防抖：10次只执行1次
• 函数节流：10次可能执行 3 ~ 4 次

案例

设计一个输入框，实现多个连续输入，只触发一次请求

<input id="search" type="text">
<script>
  let inp = document.getElementById("search");
  let timerId = null;
  inp.oninput = function (e) {
    // 每次连续输入，每次取消上次请求, 直到用户两次输入间隔大于 1s , 发送网络请求
    timerId && clearTimeout(timerId);
    timerId = setTimeout(() => {
      console.log(this, e); // 拿到输入数据
      console.log("发送请求");
    }, 1000)
  }
</script>

image.png

封装防抖函数

function debounce(fn, delay) {
  let timerId = null;
  return function () {
    let self = this;  // 处理this
    let args = arguments;  // 处理参数 e
    // 连续输入，每次取消上次请求
    timerId && clearTimeout(timerId);
    timerId = setTimeout(() => {
      fn.apply(self, args);
    }, delay || 1000)
  }
}


// test
inp.oninput = debounce(function (e) {
    console.log(this);
    console.log(e);
    console.log("发送网络请求");
  }, 500);

---

案例

监听浏览器窗口变化，降低事件函数执行次数

let flag = false;
  window.onresize = function (e) {
    if (flag) return;
    flag = true;
    let timerId = null;
    // 连续变化，每次取消上次请求
    timerId && clearTimeout(timerId);
    timerId = setTimeout(() => {
      flag = false;
      console.log(this, e);
      console.log("监听到窗口变化");  // 每30响应一次
    }, 300)
  }

封装节流函数

function throttle(fn, delay) {
  let timerId = null;
  let flag = false; // 默认false
  return function () {
    if (flag) return;
    flag = true;
    let self = this; // 保存this
    let args = arguments; // 保存参数 e
    // 连续输入，每次取消上次请求
    timerId && clearTimeout(timerId);
    timerId = setTimeout(() => {
      flag = false;
      fn.apply(self, args);
    }, delay || 1000)
  }
}


// test
window.onresize = throttle(function (e) {
 console.log(this, e);
 console.log("监听到窗口变化");
}, 500)

---

• 对比函数防抖和函数节流，函数节流只是在防抖上多添加一层 flag ，控制在间隔时间内执行函数

END