JS实现防抖(debounce)及节流(throttle)函数的实现教程

这两种函数算是应用场景比较广泛的函数了，那么如何实现它呢？

什么是防抖？什么是节流？

举例来说，比如要搜索某个字符串，基于性能考虑，肯定不能用户没输入一个字符就发送一次搜索请求，一种方法就是等待用户停止输入，比如过了500ms用户都没有再输入，那么就搜索此时的字符串，这就是防抖；节流比防抖宽松一些，比如我们希望给用户一些搜索提示，所以在用户输入过程中，没过500ms就查询一次相关字符串，这就是节流。

实现这两种方法的核心其实都是settimeout方法。

防抖的实现思路：每次触发事件时都取消之前的延时调用方法：

function debounce(fn, delay) {
    let handle;
    return function (e) {
        // 取消之前的延时调用
        cleartimeout(handle);
        handle = settimeout(() => {
            fn(e);
        }, delay);
    }

}

测试：

function sayhi(e){
    console.log(e.target.innerwidth, e.target.innerheight);
}
window.addeventlistener('resize', debounce(sayhi, 500));

效果：

节流的实现思路：每次触发事件时都判断当前是否有等待执行的延时函数：

function throttle(fn, delay) {
    let runflag = false;
    return function (e) {
        // 判断之前的调用是否完成
        if (runflag) {
            return false;
        }
        runflag = true;
        settimeout(() => {
            fn(e);
            runflag = false;
        }, delay)
    }
}

测试：

function sayhi(e){
    console.log(e.target.innerwidth, e.target.innerheight);
}
window.addeventlistener('resize', throttle(sayhi, 500));

效果：

推荐成熟的库方法：lodash