JavaScript 防抖函数

debounce.js

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

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

当监听用户输入事件时，我们会根据用户的输入内容进行搜索，我们不希望每次键入都会触发请求，因此可以利用延迟函数，设置一个0.5s的间隔，这样当用户输入停顿0.5s时，即会触发1次搜索。
当在窗口大小改变时，我们希望进行重新初始化视图，若不做限制的话，每次拖动会触发无数次请求，造成系统卡顿，利用防抖函数可在用户拖动完成后触发一次视图刷新。
在JavaScript中，我们主要使用setTimeout、clearTimeout的特性实现，只需要记录一个timer的id，每次执行任务时首先清除任务id，再重新设置id，这样若处于延时时间段内的任务就会被清除掉，重新计时。