什么是防抖和节流？

2024-08-31 21:52

文章标签 节流防抖

本文主要是介绍什么是防抖和节流？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

在进行窗口调整（resize）、滚动（scroll）以及输入框内容校验等操作时，若事件处理函数频繁调用，可能会给浏览器带来极大负担，从而导致用户体验变差。为了优化性能，我们可以使用防抖（debounce）和节流（throttle）技术来控制函数的调用频率，从而提高应用的效率和流畅度。它们的核心思想是通过设置时间间隔来限制函数的执行时机。

防抖（Debounce）

防抖技术的关键在于：在一个事件被触发后，等待一段时间（n秒）再执行回调函数。如果在这段时间内该事件再次被触发，则重新计时。这样可以有效减少函数的执行次数，特别适用于高频次的事件，如用户输入或窗口调整。

示例代码

未使用防抖的效果

var mydiv = document.getElementById('mydiv');
let count = 0;function myEvent() {mydiv.innerText = count++;
}mydiv.addEventListener('mouseover', function(event) {myEvent();
});

使用防抖后的效果

function debounce(fn, delay) {let timeout = null;return function() {if (timeout) {clearTimeout(timeout);}timeout = setTimeout(() => {fn.apply(this, arguments);}, delay);}
}var mydiv = document.getElementById('mydiv');
let count = 0;function myEvent() {mydiv.innerText = count++;
}mydiv.addEventListener('mouseover', debounce(myEvent, 2000));

原理说明

防抖的核心在于推迟函数的执行，直到事件触发停止一段时间后才执行回调。例如，在鼠标移动时，只有在最后一次触发事件后经过2秒钟才执行回调函数 myEvent。如果用户持续移动鼠标，函数会在最后一次移动后再等待2秒才执行。这种方式有效避免了高频事件的频繁处理，减少了对浏览器性能的影响。

节流（Throttle）

节流技术的关键在于：在一定时间间隔（delay）内，只允许函数执行一次，即使该时间间隔内事件被多次触发，也仅有第一次生效。节流可以有效降低函数执行频率，使事件处理更为稳定。

示例代码

定时器实现方式

function throttle(fn, delay) {let hasRun = false;return function() {if (hasRun) {return;}hasRun = true;setTimeout(() => {hasRun = false;fn.apply(this, arguments);}, delay);}
}var mydiv = document.getElementById('mydiv');
let count = 0;function myEvent() {mydiv.innerText = count++;
}mydiv.addEventListener('mouseover', throttle(myEvent, 2000));

时间戳实现方式

let div = document.querySelector('div');
var count = 0;function myEvent() {div.innerText = count++;
}div.onmouseover = throttle(myEvent, 2000);function throttle(func, wait) {let pre = 0;return function() {let now = new Date().getTime();if (now - pre > wait) {pre = now;func.apply(this);}}
}