节流就是「技能冷却中」
const throttle2 = (fn, time) =>{
let timer = null
return (...args)=>{
if(timer){
return
}
fn(...args)
timer = setTimeout(()=>{
timer = null
}, time)
}
}
const xx = throttle(闪现, 10 * 1000)
节流和防抖类似,只不过节流不是只有最后输出,而是每过一段时间执行一次,例如鼠标滚轮事件,每当鼠标向下滚动时我们需要加载数据,但是如果不加以控制你会发现只是向下滚动了一小下,结果可能却执行了几十此事件,此时我们需要加以节制,例如我们想控制每半秒钟请求一次数据,此时防抖就不适用了,因此我们需要使用节流来控制,如下
function throttle(time,fn,lastExe){
//此处定义的两个变量只会在第一次调用throttle方法时生效,之后都是执行闭包返回的函数
let timer = new Date();
let t = null;
return function(){
const now = new Date();
if(lastExe){
if(now-timer>=time){
//时间到了执行
fn();
timer = now;
//此时鼠标还在滑动,若有定时器则清除
t&&clearTimeout(t);
}else{
//此时没有达到时间条件,做定时器清除和添加操作,保证鼠标停止时,只有一个定时器
t&&clearTimeout(t);
t = setTimeout(()=>{console.log('节流最后一次输出')},500);
}
}
}
}
function fn(){
console.log('节流')
}
document.getElementById('body').addEventListener('mousemove',throttle(500,fn,true));
</script>
此时我们定义了一个鼠标移动事件,在该div上移动,每移动500毫秒,执行一次fn函数,原理和防抖类似,知识添加了一个时间的控制,每当时间达到了我们设置的时间,就执行一次fn函数。
添加第三个参数标记最后需要输出一次,在原有基础上添加了一个定时器,注释有说明,通过定时器记录当用户停止滑动时,有一个定时器会执行,即最后一次一定执行一次。
注意了解闭包原理,初始时
let timer = new Date(); let t = null;
这两个变量只会执行一次赋值。
防抖就是「回城被打断」
const debounce = (fn, time) => {
let 回城计时器 = null
return (...args) => {
if (回城计时器 !== null) {
clearTimeout(回城计时器) // 打断回城
}
// 重新回城
回城计时器 = setTimeout(() => {
fn.call(undefined, ...args) // 回城后调用 fn
回城计时器 = null
}, time)
}
}
防抖常见的有我们定义一个输入框的keyUp事件,每次键盘输入都会调用该事件,此时,如果我们在该事件中请求接口数据,则会造成输入搜索关键字结果发出来n次请求,造成了资源的大大浪费,如果请求数据量大,还会造成卡顿现象,此时加入防抖是一个很好的解决办法。
<input type="text" id="text"/>
<script>
function debounce(time){
let timer;
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{console.log('防抖')},time)
}
}
document.getElementById('text').addEventListener('keyup',debounce(1000));
</script>