前端初学者笔记JavaScript的防抖/节流函数

Posted 2021-08-31 2018学生

在常见的浏览器网页B/S架构中，用户在网页发送的请求很快就能发送到服务器端。

若用户发送的请求次数过多，后端可能无法快速处理，或某些函数执行次数过多，浏览器可能将面临卡死的状况。因此防抖函数和节流函数应运而生。

防抖函数(debounce) 本质是通过setTimeout()方法延时处理函数的自定义函数：

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
            timer = setTimeout(fn,delay) 
        }else{
            timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
    }
}

用例: debounce( submit(), 200 )

效果：如果短时间内大量触发同一事件，只会执行一次函数。

实现：既然前面提到了计时，实现的关键就在于setTimeout这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现。

防抖函数已经处理了某些函数执行次数过多的问题，但并不完美。当用户短时间内大量触发事件时只会等待用户停止触发后的delay毫秒后才会触发一次函数，而若用户有以下需求：在不停执行请求函数时也能不间断的发送一些请求，如在滑动浏览器滚动条时，在控制台打印其位置。

我们知道浏览器滚动条的位置是连续的，若直接打印位置会使执行打印函数次数过多，导致浏览器卡死。而采用防抖函数时，只会当用户松开鼠标停下delay毫秒后才会打印一次滚动条位置，而这并不符合用户需要实时动态地打印滚动条位置的要求。

节流函数(throttle) 可以满足上述要求：

（不止一种实现方案，该处只是举例，节流函数甚至可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。）

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}

 不使用setTimeout的时间戳实现节流函数的方法:

function throttle(fn, delay) {
    var previous = 0;
    // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
    return function() {
        var _this = this;
        var args = arguments;
        var now = new Date();
        if(now - previous > delay) {
            fn.apply(_this, args);
            previous = now;
        }
    }
}

// test
function testThrottle(e, content) {
    console.log(e, content);
}
var testThrottleFn = throttle(testThrottle, 1000); // 节流函数
document.onmousemove = function (e) {
    testThrottleFn(e, 'throttle'); // 给节流函数传参
}

 这是一种类似于控制阀门一样定期开放的函数，当让函数执行一次后，在某个时间段内暂时失效，过了这段时间后才再重新激活。

效果：如果短时间内大量触发同一事件，在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

在上述打印滚动条位置的案例中，将节流函数应用进去：

document.onscroll = throttle(function() { console.log('scroll事件被触发了' + Date.now()) }, 200)

效果是在用户不停地滑动滚动条时，每隔200毫秒就在控制台打印滚动条的位置，这便符合用户的需求。

总结：

防抖/节流函数在当下的应用有很多，除了上述的案例外，具体的还有如：

防抖：每次resize/scroll触发统计事件、文本输入的验证（连续输入文字发送的AJAX请求只验证一次）

节流：谷歌搜索框/搜索联想、高频点击间断提交，表单重复提交；

等等。

即便在前端有大量框架工具的情况下，我们处理一些问题时也总是绕不开原生的JavaScript脚本，

 因此要掌握牢固的基础知识，在面对问题时积极调动逻辑。