防抖
节流的原理
一段时间内,频繁触发一个事件(多次点击),以最后一次为准
节流的使用场景
例如:一个搜索输入框,用户不停的进行输入(这个时候就是抖动的过程),等用户输入停止之后,再触发搜索
function debounce(fn, delay = 200) {
let timer = 0
return function() {
// 如果这个函数已经被触发了
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments); // 透传 this和参数
timer = 0
},delay)
}
}
简单点的防抖函数
data:{
timer:null
},
methods:{
//在最后一次点击三秒后才会触发一次点击事件
test(){
// 新的事件发生会将这个定时器清除重新创建一个
clearTimeout(this.timer)
//自定义个定时器三秒后执行,只有三秒内不出现事件这个定时器才不会被销毁重构
this.timer = setTimeout(()=>{
console.log("防抖执行,这里就是你需要执行的操作")
},3000)
}
}
节流
节流的原理
在指定的时间间隔内,只允许函数执行一次。如果在这个时间间隔内再次触发函数,就会忽略掉,直到时间间隔过去后再次允许执行。
节流的使用场景
在前端开发中,一些事件(如滚动、拖拽、窗口调整等)可能会在短时间内频繁触发,导致性能问题。为了降低这种频繁触发带来的性能影响,可以使用节流来限制函数的执行频率
function throttle(fn, delay = 200) {
let timer;
return function() {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
}
};
}
fn.apply(this, arguments) 是 JavaScript 中的函数调用方法。
fn 是一个函数,在这里代表传递给 debounce 函数的待执行函数。
.apply() 是 JavaScript 内置的方法,它可以在指定的作用域(this 的上下文)上调用函数,并传递额外的参数。
this 在这里指的是传递给 debounce 函数返回的匿名函数的执行上下文。
arguments 是一个包含了所有传入函数的参数的类数组对象。
综合起来,fn.apply(this, arguments) 的意思就是在指定的作用域(this 的上下文)下调用函数 fn,并将匿名函数接收到的参数(arguments)透传给它。
这样做的目的是确保函数 fn 在使用防抖函数时能够保留其原本的执行上下文和参数。