防抖函数:
防抖函数会延迟执行函数,直到指定的间隔事件内没有新的函数调用。如果在指定的时间间隔内有新的函数调用,则会重新计时。这样可以确保只在连续触发事件停止后的指定时间间隔内才执行函数。
// 防抖函数 function debounce(func, delay) { let timer = null; return function () { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, arguments); }, delay); }; }
节流函数:
节流函数会在指定的时间间隔内只执行一次。它会定时执行函数,但无论间隔时间内有多少次函数调用,都只会执行一次,这样可以确保在指定时间间隔内函数不会被频繁地执行。
// 节流函数 function throttle(func, delay) { let timer = null; return function () { if (!timer) { timer = setTimeout(() => { func.apply(this, arguments); timer = null; }, delay); } }; }
这两个函数都是通过闭包的方式实现的,节流函数throttle将在指定的延迟时间内只执行一次传入的函数,而防抖函数debouce将在指定的延迟时间内没有新的函数调用时才执行一次传入的函数
function handleScroll() { console.log("Scroll event"); } // 使用节流函数,延迟 200 毫秒执行 const throttledScroll = throttle(handleScroll, 200); window.addEventListener("scroll", throttledScroll); // 使用防抖函数,延迟 200 毫秒执行 const debouncedScroll = debounce(handleScroll, 200); window.addEventListener("scroll", debouncedScroll);
handleScroll
函数将会延迟执行,确保不会在指定的延迟时间内频繁触发事件。您可以根据需要调整延迟时间,以满足您的实际需求。