防抖和节流

防抖 (DEBOUNCE)

在用户停止操作间隔一定时间后再来执行函数，例如：输入搜索内容，在停止输入的一段时间后进行搜索。即省去了点击按钮的操作，也要节省性能。

实现

function debounce(func, wait) {
    let timeout;

    return function () {
        let context = this; // 保存this指向
        let args = arguments; // 拿到event对象

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

通过闭包将timeout缓存，由于setTimeout是异步处理，如果下一次调用时如果没有达到wait时间，原来的timeout计时器就会被清除，并且重新设置定时器。

节流（throttled）

n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。同样可以减少调用频率

function throttled2(fn, delay = 500) {
    let timer = null
    return function (...args) {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args)
                timer = null
            }, delay);
        }
    }
}

与防抖不同，节流只有在执行之后才清除计时器，也就是在这段delay时间只会触发一次。

参考