地狱猫

防抖

原理

防抖函数的原理是如果用户频繁操作事件处理函数就不会执行，只有当进行了最后一次操作，并且时间大于设定的时间才会执行

作用

节省浏览器CPU资源；让页面浏览更加顺畅；减轻服务器压力

应用场景

  1. 只有在用户最后一次改变页面尺寸时才做一些操作
  2. 当用户在搜索框停止输入后发起Ajax请求

实现

<button id="debounce">点我防抖！</button>
1

<script>
  window.onload = function() {
    // 1、获取这个按钮，并绑定事件
    var myDebounce = document.getElementById("debounce");
    myDebounce.addEventListener("click", debounce(sayDebounce,1000));
  }

  // 2、防抖功能函数，接受传参
  function debounce(fn, delay=1000) {
    let timer = null
    return function() {
      if(timer){ clearTimeout(timer);}
      let context = this;
      let args = arguments;
      timer = setTimeout(() => {
        fn.apply(context, args)
      }, delay)
    }
  }

  // 3、需要进行防抖的事件处理
  function sayDebounce() {
    // ... 有些需要防抖的工作，在这里执行
    console.log("防抖成功！");
  }

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

← 节流→