函数防抖、函数节流

函数防抖/节流，就是控制函数的执行频率。

防抖

实现代码

/**
 * 
 * @params { Function } func - 触发后，在wait期间，没有再次触发，就会执行
 * @params { number } wait
 */
function debounce(func, wait) {
    var timer = undefined;
    return function() {
        var that = this;
        var args = arguments;
        if(timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function() {
            func.call(that, ...args);
        }, wait)
    }
}

使用场景

滚动到底部，自动获取更多信息

节流

实现代码

/**
 *
 * func立即执行，之后每wait间隔执行，最后还会执行一次
 */
function throttle(func, wait) {
    var play = false;
    var copy = func;
    return function() {
        var context = this;
        var args = arguments;
        copy = func;
        if (!play) {
            if (copy) {
                copy.call(this, ...arguments);
                copy = null
            }
            play = true;
            let timer = setTimeout(() => {
                play = false;
                if (copy) {
                    copy.call(this, ...arguments);
                }
                clearTimeout(timer);
            }, wait);
        }
    }
}

使用场景

1. input输入

结尾

本篇所有代码

本篇内容源代码

参考文章

前端面试手写题
函数的防抖和节流是个啥？？？