防抖与节流
-
在开发过程中我们经常会绑定一些持续触发的事件,这些事件处理函数中的代码会被频繁执行,浏览器反应会明显变慢
为了解决这个问题,有了防抖与节流方案
-
**函数防抖:**将一个弹簧按下,继续加压,继续按下,只会在最后放手的一瞬反弹。即我们希望函数只会调用一次,即使在这之前反复调用它,最终也只会调用一次而已。
-
函数节流:一个水龙头在滴水,可能一次性会滴很多滴,但是我们只希望它每隔 500ms 滴一滴水,保持这个频率。即我们希望函数在以一个可以接受的频率重复调用。
函数防抖(
debounce
)在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
实现思路:
-
延迟
debounce
(非立即执行)事件被触发时,设置一个周期延迟执行动作;若期间又被触发,则重新设定周期,直至周期结束,执行动作
-
前缘
debounce
(立即执行)即执行动作在前,然后设定周期,周期内有事件被触发,不执行动作,且周期重新设定。
function renderCnt() { document.querySelector(".cnt").innerHTML = cnt++; }; function debounce(func, wait) { let timeout; return function () { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { func.apply(this, arguments); }, wait); } }; document.onmousemove = debounce(renderCnt, 200);
在这个过程发生了什么?
当页面鼠标开始有动作时,
debounce
函数里的匿名函数开始执行;鼠标每移动一点,就会触发一次匿名函数的执行;如果timeout
存在值,就会将timeout
清除。直到鼠标停止运动,匿名函数不执行。上一次设置的setTimeOut
才会执行
-