vv13
博客订阅

什么是函数节流

防抖函数

“防抖”即防止重复执行,它规定了一个延时执行时间,若程序下一次触发的时间还处于延时段内,则程序会清除之前的定时任务,并重新设定延迟任务,有很多时候我们需要防抖函数:

  • 当监听用户输入事件时,我们会根据用户的输入内容进行搜索,我们不希望每次键入都会触发请求,因此可以利用延迟函数,设置一个0.5s的间隔,这样当用户输入停顿0.5s时,即会触发1次搜索。
  • 当在窗口大小改变时,我们希望进行重新初始化视图,若不做限制的话,每次拖动会触发无数次请求,造成系统卡顿,利用防抖函数可在用户拖动完成后触发一次视图刷新。

在JavaScript中,我们主要使用setTimeout、clearTimeout的特性实现,只需要记录一个timer的id,每次执行任务时首先清除任务id,再重新设置id,这样若处于延时时间段内的任务就会被清除掉,重新计时:

function debounce(fn, delay) {
    let timerId = null;
    
    return (...args) => {
        clearTimeout(timerId);
        timerId = setTimeout(() => {
            fn(args)
        }, delay)
    }    
}

节流函数

“节流”就是降低任务执行频率,在指定的时间间隔内只允许一次任务的触发。比如在下拉滚动事件中,我们需要判断滚动条距离屏幕顶部的高度,若没有节流函数时,则每次滚动都会触发大量的计算操作,通过节流函数,可以让这类连续触发的任务得到很好的性能提升。

在JavaScript中,其实我们通过一个标志位即可解决节流的问题。我们将标志位开做一个门,当一个房间只能容纳下1个人时,若房间没有人,则门是开着的;如果人进去以后会把门关上,这时其他人就无法再进来;等人离开时会将门打开,其他人才可以进来。代码如下:

function throttle(fn, delay) {
    let lock = false;
    
    return (...args) => {
        if (lock) return;
        lock = true;
        setTimeout(() => {
            lock = false;
            fn(args)
        }, delay)
    }    
}

参考资料