// 防抖函数
function fangdou(fn,delay){
// 1.设置的定时器为null
let timer = null;
return function(){
// 3.如果定时器不为空则说明已经执行了防抖函数,那么就清空定时器
if(timer){
clearTimeout(timer)
}
// 2.
// 触发事件就执行定时器,在规定的时间后内执行要防抖的函数
// 如果此时在该定时器还没结束的时候,又执行了一次函数,那么就还得再执行一次定时器,
// 此时就会多次执行定时器,也就会多次执行要防抖的函数,就达不到防抖的目的了,
// 所以当再次触发事件时,就要执行第3步的清空定时器,让定时器重新计时
// 时间过了,再执行要防抖的函数,从而达到只执行一次定时器的目的
timer = setTimeout(() => {
// 4.执行要防抖的函数并改变this指向
fn.call(this)
},delay)
}
}
// 节流函数
function jieliu(fn,delay){
// 1.设置一个参数为真
let flag = true;
return function(){
// 如果参数为真就执行定时器
if(flag){
setTimeout(() => {
// 执行节流函数并执行this
fn.call(this);
// 3.将参数flag改为true,即在执行完毕这一次的定时器,才能开启下一次的定时器
// 也就是在规定的时间内只能执行一次节流函数
flag = true;
},delay)
}
// 2.定时器执行完毕,将falg改为false,当再次执行该函数时,
// 就不再执行定时器里面的节流函数,就执行一次定时器
flag = false
}
}
06.js防抖与节流
最新推荐文章于 2024-08-27 13:38:21 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)