JS防抖&节流函数及其使用场景
1、防抖函数概念
函数防抖是优化高频率执行JS代码的一种手段【永远在执行最后一次】
其中如:浏览器的resize、scroll,鼠标的mousemove、mouseover等事件在触发时会不断绑定事件上的回调函数,浪费资源、降低性能,这时需要用防抖函数来进行调用次数的限制。
(1)使用场景及函数样式
回到顶部、立即(实时)搜索、输入框搜索自动补全事件、频繁点赞&取消点赞等
//防抖函数 重点【必须清理定时器】
function debounce(callback,time = 400){ // 设置定时器时间为400ms
let t;
return function(){
clearTimeout(t);
t = setTimeout(callback,time);
}
}
//绑定滚动条事件
window.onscroll = debounce(function(){
console.log("调用了一次"); //注:log("要执行的事件")
},500); // 限制500ms执行一次
实现原理:如果在500ms内频繁操作事件,则每次都会清除一次定时器然后重新创建一个。直到最后一次操作事件,然后等待500ms后进行处理
(2)作用
当有些事件触发频率太高,浏览器来不及处理会造成浏览器卡顿、掉帧等
2、节流函数概念
函数防抖是优化高频率执行JS代码的一种手段
其中如:浏览器的resize、scroll,鼠标的mousemove、mouseover等事件在触发时会不断绑定事件上的回调函数,浪费资源、降低性能,这时需要用防抖函数来进行调用次数的限制。
(1)使用场景及函数样式
onrize、onscroll等频繁触发的函数,比如获取滚动条的位置然后执行下一步事件
// 节流函数 重点【最后必须重新赋值】
function throlle( callback,time){
let lasttime = new Date().getTime();
return function(){
let now = new Date().getTime();
if(now - lasttime > time){
callback();
lasttime = now;
}
}
}
window.onscroll = throlle(function(){
console.log("调用了一次");
},100);
实现原理:在一定时间间隔内只执行一次,在这段时间内无视后来产生的函数调用请求
(2)作用
当有些事件触发频率太高,浏览器来不及处理会造成浏览器卡顿、掉帧等
3、函数防抖&节流的区别
①相同点
都可以通过setTimeout实现,目的都是降低回调执行频率,节省资源,提高性能,前提都是频繁触发
②不同点
防抖:在一段连续操作结束后处理回调,将多次触发变为一次触发,一定时间内连续触发的事件只在最后一次执行
节流:减少一段时间的触发频率,一段连续操作中每一段时间只执行一次,侧重于一段时间内只执行一次
触发,一定时间内连续触发的事件只在最后一次执行
节流:减少一段时间的触发频率,一段连续操作中每一段时间只执行一次,侧重于一段时间内只执行一次