JavaScript的防抖/节流函数

·  阅读 129

在常见的浏览器网页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脚本,

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

分类:
前端