首页js防抖函数和节流实例

js防抖函数和节流实例

时间: 2024-02-22 14:34:08 浏览: 115

防抖函数和节流函数都是用来限制函数的执行频率，防止短时间内多次触发导致性能问题。防抖函数（Debounce）的作用是将多次连续触发的函数调用合并为一个函数调用。当事件触发后，设定一个定时器，在指定的时间间隔内如果事件再次触发，则重新计时，直到指定时间间隔内没有事件再次触发，才执行函数。下面是一个使用防抖函数的例子： ```javascript function debounce(func, delay) { let timer = null; return function(...args) { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, delay); }; } // 使用防抖函数来限制按钮点击事件的频率 const button = document.querySelector('button'); button.addEventListener('click', debounce(() => { console.log('Button clicked'); }, 2000)); ``` 节流函数（Throttle）的作用是在一定时间间隔内只执行一次函数。当事件触发后，设定一个定时器，在指定的时间间隔内只能执行一次函数。下面是一个使用节流函数的例子： ```javascript function throttle(func, delay) { let timer = null; let lastTime = 0; return function(...args) { const currentTime = new Date().getTime(); if (currentTime - lastTime > delay) { func.apply(this, args); lastTime = currentTime; } }; } // 使用节流函数来限制滚动事件的触发频率 window.addEventListener('scroll', throttle(() => { console.log('Scrolling'); }, 1000)); ``` 这样，在按钮点击事件或者滚动事件触发时，就可以控制其执行频率，避免频繁触发导致性能问题。

阅读全文