js 节流防抖|极客笔记

js 节流防抖

在前端开发中，为了优化页面性能和用户体验，经常会用到节流（throttle）和防抖（debounce）的技术。这两种技术通过控制某个函数的执行频率来提高页面的性能表现。

节流（throttle）

节流的概念是在一定时间内，无论触发几次目标函数执行，都只认第一次，忽略后续的触发。在这段时间内无论执行多少次目标函数都不会再有其他操作。

应用场景

页面滚动事件的监听。
搜索框输入联想搜索功能。
鼠标移动事件的监听。

实现原理

在触发目标函数时，记录下当前时间戳。如果下一次触发时间间隔小于规定的时间间隔，就忽略这次触发。

代码示例

function throttle(func, wait) {
    let timer;

    return function() {
        if (!timer) {
            func.apply(this, arguments);
            timer = setTimeout(() => {
                timer = null;
            }, wait);
        }
    }
}

const printHello = () => {
    console.log('Hello World!');
}

const throttledPrintHello = throttle(printHello, 1000);

window.addEventListener('scroll', throttledPrintHello);

运行结果

Hello World!
Hello World!
Hello World!
...

防抖（debounce）

防抖的概念是在一定时间内，如果事件被频繁触发，只认最后一次。在这段时间内如果事件频繁触发，则会重新计时。

应用场景

搜索框用户输入时，只有在输入停止一段时间后再进行搜索。
窗口大小改变时，只有在停止改变一段时间后再进行响应。
防止连续点击按钮触发多次事件。

实现原理

在触发目标函数时，设置一个定时器。如果在规定的时间内再次触发该函数，则清除之前的定时器重新设置一个新的定时器。

代码示例

function debounce(func, wait) {
    let timer;

    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, arguments);
        }, wait);
    }
}

const printHello = () => {
    console.log('Hello World!');
}

const debouncedPrintHello = debounce(printHello, 1000);

window.addEventListener('scroll', debouncedPrintHello);