JavaScript之函数节流throttle方法和函数防抖debounce方法--阿里前端笔试题&&前端面试准备

函数节流和函数防抖是什么

函数节流

对于持续触发的事件，规定一个间隔时间（n秒），每隔n秒只能执行一次。

函数防抖

对于在事件被触发n秒后再执行的回调，如果在这n秒内又重新被触发，则重新开始计时。

二者异同

相同：都能防止函数过于频繁的调用。
不同：

• 函数节流的情况下，函数将每个 n 秒执行一次。
• 函数防抖的情况下，函数将一直推迟执行，造成不会被执行的效果；

实现

好难哦，我这个小白就先学学初步实现吧

throttle

//时间戳的方式
function throttle(func, wait) {
    let previous = 0;
    return function() {
        let now = +new Date();
        let context = this;

        if (now - previous >= wait) {
            func.apply(context, arguments);
            previous = now; // 执行后更新 previous 值
        }
    }
}
//定时器function throttle(func, wait) {
        let time, context
        return function(){
            context = this
            if(!time){
                time = setTimeout(function(){
                    func.apply(context, arguments)
                    time = null
                }, wait)
            }
        }
    }

debounce

function debounce(func, wait) {
    let timeout
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(func, wait) //返回计时器 ID
    }
}

因为学这个 我发觉自己也不会apply是啥子

来学学apply吧:D

基本参考自:
throttle参考
debounce参考