JS-27-函数防抖和节流

一、函数防抖

1.什么是函数防抖[debounce]?

函数防抖是优化高频率执行js代码的一种手段；
可以让被调用的函数在一次连续的高频操作过程中只被调用一次

2.函数防抖作用

减少代码执行次数, 提升网页性能

3.函数防抖应用场景

  oninput / onmousemove  / onscroll / onresize等事件
  */
  let oInput = document.querySelector("input");
  let timerId = null;
  // abc
  oInput.oninput = function () {
      timerId && clearTimeout(timerId);
      timerId = setTimeout(function () {
          console.log("发送网络请求");
      }, 1000);
      // console.log(this.value);
      // console.log("发送网络请求");
  }

---

二、函数节流

1.什么是函数节流[throttle]?

函数节流也是优化高频率执行js代码的一种手段；
可以减少高频调用函数的执行次数

2.函数节流作用

减少代码执行次数, 提升网页性能

3.函数节流应用场景
oninput / onmousemove  / onscroll / onresize等事件

4.函数节流和函数防抖区别

函数节流是减少连续的高频操作函数执行次数  (例如连续调用10次, 可能只执行3-4次)
函数防抖是让连续的高频操作时函数只执行一次(例如连续调用10次, 但是只会执行1次)