防抖和节流是前端开发中常用的两种优化性能的技术，用于限制函数执行的频率。
防抖（Debouncing）：当事件被触发n秒后再执行回调，如果在这n秒内又触发了该事件，则会重新计算时间，只有当n秒内没有再次触发事件才会执行回调。也就是说，事件被触发后，只有等到一定时间内没有再次触发事件才会执行函数，适合处理频繁触发事件的情况。
function debounce(func, delay) {
let timerId;
return function() {
const context = this;
const args = arguments;
clearTimeout(timerId);
timerId = setTimeout(function() {
func.apply(context, args);
}, delay);
}
}
节流（Throttling）：在一段时间内只执行一次回调函数。当事件被触发时，回调函数会立即执行，然后在指定时间内不论触发事件多少次，都会忽略，直到上一次执行的回调函数完成后才会继续执行。也就是说，无论事件触发频率多高，每隔一段时间就执行一次函数，适合处理函数调用过于频繁的情况。
function throttle(func, delay) {
let lastTime = 0;
return function() {
const context = this;
const args = arguments;
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(context, args);
lastTime = now;
}
}
}
两者的区别在于，防抖是在事件触发后等待一定时间再执行回调函数，而节流是在一定时间内只执行一次回调函数。
在实际应用中，可以根据实际需求选择使用防抖或节流来优化性能，比如对于一些用户输入相关的操作，使用防抖可以避免频繁触发请求，而对于一些滚动、拖拽等频繁触发的操作，使用节流可以减少函数调用次数，提高性能。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/199236.html
