JS 防抖节流
在 JS 中， 滚动事件、鼠标移动 、 input 等事件 都会产生 任务频繁执行的问题， 针对此情况、可以采用 防抖节流手段 进行处理
防抖解决思路： 在最后一刻 单位时间内 延迟执行。
每次执行任务 会对 任务 进行延迟 操作,
当下一次 执行任务的 时候， 会 先停止 上一次的延迟任务， 重新开始延迟任务。节流解决思路 ： 每次 执行延迟 任务 都需要 在 上一次 任务 结束后 再执行。
- 防抖
function debounce(fn, delay=500) {
// 定义一个 变量，用来存储延迟任务的句柄
let playing = false ;
return function() {
let args = arguments ;
// 如果 playing 有值, 停止上一次的延迟
if (playing) clearInterval(playing) ;
// 重新开始延迟任务
playing = setTimeout(() => {
// 执行任务 、调用 fn
fn.apply(this, args);
playing = false ;
} , delay)
}
}
// 定义任务函数、并将其交给debounce函数
function getCompany() {
console.log("正在查询公司名称");
}
// 创建一个 防抖任务
let delayTask = debounce(getCompany, 200);
// 绑定 input 事件、并触发 防抖任务。
document.querySelector("input").addEventListener("input", delayTask)
- 节流
function throttle(fn, delay = 500){
let playing = false ;
return function() {
let args = arguments ;
if (!playing) {
playing = setTimeout(()=> {
// 调用 任务函数、处理任务
fn.apply(this, args) ;
// 任务完成后， 将 playing 设置为 false
playing = false ;
}, delay);
}
}
}
function test() {
console.log("我是节流代码")
}
let throttleTask = throttle(test) ;
// 绑定事件
document.querySelector("input").addEventListener("input", throttleTask)