一.区别

防抖

防抖的主要作用时为了防止在少量时间内，每一次相同的行为都执行事情，即防止无意的抖动行为，其主要的特点是在一个相同连续的行为中，只执行最后一次行为所监听的事件。如提交表单的按钮，如果在同一时间大量点击按钮，我们使用防抖技术，只执行最后一次的点击事件，这个可以节约大量的api请求。

节流

防抖的主要作用时为了防止在多中重复的行为中，每一次相同的行为都执行事情，虽然这点和防抖很像，但是节流的主要特点是在一个相同连续的行为中，每隔一个时间，只执行一次行为所监听的事件。如鼠标移动小球的行为，如果没有使用节流，每次移动都会触发鼠标移动事件，而使用节流，每隔20ms才触发事件，能够达到差不多的效果，但是触发事件的数量少了很多。

二.实现和对比

防抖

dom结构

<div>
    <button id="btn" type="button">点击</button>
</div>   

没有使用防抖的情况

js

    let btn = document.getElementById("btn");
    btn.onclick = ()=>{
         setTimeout(()=>{
              console.log("已点击");
         },1000)
    }

效果图

没有防抖的时候 每次点击都会触发一遍事件。

使用防抖

js

        let btn = document.getElementById("btn");
        let time = null;
        btn.onclick = () => {
            // 关键在于每次点击都清除前一次的定时器 保留最后一次的定时器
            clearTimeout(time);
            time = setTimeout(() => {
                console.log("已点击");
            }, 1000)
        }

效果图

使用防抖时，只有做后一次点击生效了，可以防止大量重复点击

节流

dom结构

<div>
        <div style="width: 50px;height: 50px;border-radius: 50%;background-color: red;position: absolute;" id="round">
        </div>
    </div>

没有使用节流的情况

js

    let btn = document.getElementById("btn");
    btn.onclick = ()=>{
         setTimeout(()=>{
              console.log("已点击");
         },1000)
    }

效果图

没有节流的时候 一段时间都会触发一遍事件。

使用节流

js

 let round = document.getElementById("round");
 // 设置一个控制能够生成定时器的变量，每次执行都置为false，只有定时器执行时才置为true，这样，每隔一段时间才会执行时间
 let time = true;
 round.onmousemove = (event) => {
     if (time) {
          time = false;
          setTimeout(() => {
          console.log(1);
          round.style.top = event.pageY - 20 + 'px';
          round.style.left = event.pageX - 20 + 'px';
          time = true;
          },20);
     }
}

效果图

使用节流时，每隔20ms执行一遍事件，效果和原来的差不多，但是执行事件数量大大减少，节省了很多的性能

版权属于：小小窝/禾下月

本文链接：https://hxyxyz.top/index.php/Web/320.html

本站文章采用 知识共享署名4.0 国际许可协议 进行许可，请在转载时注明出处及本声明！