一、防抖
性能优化方案,防抖用于减少函数请求次数,对于频繁的请求,只执行这些请求的最后一次。
基础版本
function debounce(func, wait = 300){
let timer = null;
return function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(fn,wait);
}
}
使用
debounce(function(e){
console.log(e)
}, 500)
应用场景:
(1)、search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
(2)、window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
2、节流函数
性能优化方案,节流用于减少函数请求次数,与防抖不同,节流是在一段时间执行一次。
function throttle(func, delay){
let timer = null
return function(...arg){
if(!timer){
timer = setTimeout(()=>{
func.apply(this, arg)
timer = null
}, delay)
}
}
}
使用
throttle(function(e){
console.log(e)
}, 500)
应用场景:
(1)、鼠标不断点击触发,mousedown(单位时间内只触发一次)
(2)、监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断