浅析函数防抖节流

编程入门行业动态更新时间:2024-10-26 13:33:51

浅析<a href=https://www.elefans.com/category/jswz/34/1771370.html style= 函数防抖节流"/>

浅析函数防抖节流

防抖和节流都是前端开发中常用的优化性能的技术。

一、定义

防抖：

防抖指的是在事件触发后，在规定的时间内若再次触发，则重新计时，直到规定时间内没有再次触发事件，才执行事件处理。这样可以避免在短时间内频繁地触发事件而导致页面卡顿或者出现错误。

节流：

节流指的是在规定的时间内只执行一次事件处理。在事件被触发后，首先会执行一次事件处理，然后在规定时间内，无论事件被触发多少次，都不会再次执行事件处理，直到规定时间过去后才会执行下一次事件处理。这样可以有效节约资源，提高页面的性能。

两者的区别在于防抖是在最后一次事件触发之后再进行事件处理，而节流则是在规定时间内只执行一次事件处理。

简单理解为

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

二、示例

防抖

function debounce(func, delay) {let timer;return function() {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, arguments);}, delay);};
}// 使用防抖函数处理事件
const handleSearch = debounce(function() {// 在这里执行搜索操作
}, 300);// 监听输入框的输入事件，并在防抖函数中处理
input.addEventListener('input', handleSearch);

防抖函数使用了闭包和定时器来实现。当事件触发时，清除之前设置的定时器，然后重新设置一个新的计时器，在规定时间内若再次触发该事件，则重新计时，直到规定时间内没有再次触发事件，才会执行事件处理。这样可以避免在短时间内频繁地触发事件而导致页面卡顿或者出现错误。

具体实现中，首先定义了一个timer变量来保存定时器。然后返回一个匿名函数，当该匿名函数被调用时，会先清除之前设置的定时器，然后重新设置一个新的计时器，等待一段时间后执行目标函数。

节流

function throttle(func, delay) {let timer;let lastTime = 0;return function() {const currentTime = Date.now();if (currentTime - lastTime >= delay) {func.apply(this, arguments);lastTime = currentTime;}};
}// 使用节流函数处理事件
const handleScroll = throttle(function() {// 在这里执行滚动操作
}, 200);// 监听滚动事件，并在节流函数中处理
window.addEventListener('scroll', handleScroll);

节流函数也使用了闭包和定时器来实现。每次事件触发时，判断当前时间和上一次执行事件处理的时间差，只有当时间差超过规定时间间隔时才执行事件处理操作。这样可以有效节约资源，提高页面的性能。

具体实现中，首先定义了一个timer变量来保存定时器，以及一个lastTime变量来保存上一次执行事件处理的时间。然后返回一个匿名函数，当该匿名函数被调用时，会获取当前时间，计算当前时间和上一次执行事件处理的时间差，只有当时间差超过规定时间间隔时才执行事件处理操作，并更新lastTime变量的值。