节流和防抖

刺骨的言语ヽ痛彻心扉 2021-11-17 14:42 356阅读 0赞

在前端开发过程中，我们经常会遇到持续性触发的事件，如：点击事件、滚动事件以及拖拽等，但有时我们并不想让该事件如此频繁的执行时该怎么办呢？这时我们就要用到**节流和防抖**了，它们能大大提高浏览器的性能。那么什么是节流和防抖呢？

所谓**节流**，就是指连续触发事件，但是该事件在规定时间内只执行一次。节流能稀释函数的执行频率。

<button id="myBtn">点我</button>
        <script>
    
        //函数节流
     let myBtn = document.getElementById('myBtn'); let canRun = true; myBtn.onclick = function () { if (!canRun) { return; } canRun = false; setTimeout(() => { console.log('我被点击了一次'); canRun = true; }, 1000); } </script>

先给定一个标识canRun，这个标识用来判断事件是否在空闲状态。默认设为true，表示该事件在空闲状态，此时没有执行事件。然后在每次触发事件时判断canRun是否空闲，如果不在空闲状态则什么也不执行直接return。当事件触发时canRun变为fasle，表示没有在空闲状态，事件正在执行，此时你再触发该事件时根据canRun标识判断后什么也不执行，此时就达到了一个节流的目的。在canRun变为false后设置一个延时器，在指定时间内执行完程序时再把canRun标识置为true,表示我已经空闲下来了，可以继续执行该事件了。在指定时间还未结束时，此时canRun还是false，所以事件是不会继续触发的。

所谓**防抖**，就是指连续触发事件，但是该事件在规定时间内只执行一次。如果在规定时间内该事件又触发了，则会重新计算函数的执行时间。

<button id="myBtn">点我</button>
        <script>
    
        //函数防抖
     let timer = false; let myBtn = document.getElementById('myBtn'); myBtn.onclick = function () { clearTimeout(timer); timer = setTimeout(() => { console.log('我被点击了一次'); },1000) } </script>

先设置一个执行该事件的计时器，规定在1s后执行该事件，此时在函数内部写一句清除该计时器的代码clearTimeout(timer)。此时事件每次在规定时间没到之前再执行事件时都会清除之前的时间重新计算，只有当时间达到时才会重新执行该事件。这就达到了一个函数防抖的效果。

转载于:https://www.cnblogs.com/xcxs/p/11095749.html