js节流和防抖
2021-01-14 19:12
标签:ali class 开始 应用 bounce 性能优化 time turn 完成 js节流和防抖的应用非常普遍,通常我们在完成功能代码进行性能优化的时候是最经常考虑到的点。 1、防抖 概念:在第一次触发时间的时候,不是立即执行函数,而是等待一段时间后(这个时间自己规定)后才去执行。如果在这个时间之内没有再次触发,那么就执行函数。如果在等待这段时间内又触发了这个函数,那么等待时间重新开始。 效果:如果在短时间内大量触发同一事件,只会执行一次函数。 2、节流 如上述防抖概念,如果一直在重复触发这个函数,同时又希望只是在一段时间内失效,过了这段时间再次执行,这个概念就是节流 效果:如果在短时间内大量触发同一事件,那么在函数执行一次后,该函数在指定时间内不再执行,直到过了这段时间才重新生效 js节流和防抖 标签:ali class 开始 应用 bounce 性能优化 time turn 完成 原文地址:https://www.cnblogs.com/zmyxixihaha/p/13406104.htmlfunction debounce(fn, delay){
let timer = null;
return function(){
if(timer){
clearTimeout(timer)
timer = setTimeout(fn, delay)
}else{
timer = setTimeout(fn, delay)
}
}
}
function throttle(fn, delay){
let valid = true
return function(){
if(!valid){
return false
}
valid = false
setTimeout(()=>{
fn()
valid = true
}, delay)
}
}
下一篇:ReactJS 的5种路由模式