Skip to content

Instantly share code, notes, and snippets.

@vv13
Created Nov 28, 2021
Embed
What would you like to do?
JavaScript 防抖函数
function debounce(fn, delay) {
let timerId = null;
return (...args) => {
clearTimeout(timerId);
timerId = setTimeout(() => {
fn(args)
}, delay)
}
}
@vv13
Copy link
Author

vv13 commented Nov 28, 2021

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment