介绍函数防反跳(fn,等等){
var超时=零;
返回函数(){
如果超时!==null) clearTimeout(超时);
timeout=setTimeout (fn,等);
}
}//处理函数
函数处理(){
console.log (math . random ());
}//滚动事件
window.addEventListener(& # 39;滚动# 39;,防反跳(处理,1000)); var节流=函数(函数、延迟){
var prev=Date.now ();
返回函数(){
var=背景;
var args=参数;
现在var=Date.now ();
如果(现在- prev祝辞=延迟){
函数。应用(上下文,args);
prev=Date.now ();
}
}
}
函数处理(){
console.log (math . random ());
}
window.addEventListener(& # 39;滚动# 39;,节流阀(处理,1000)); var节流=函数(函数、延迟){
var计时器=零;
返回函数(){
var=背景;
var args=参数;
如果计时器(!){
计时器=setTimeout(函数(){
函数。应用(上下文,args);
计时器=零;
},延迟);
}
}
}
函数处理(){
console.log (math . random ());
}
window.addEventListener(& # 39;滚动# 39;,节流阀(处理,1000));
小编给大家分享一下JavaScript中防抖节流的案例分析,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。
函数节流(节流阀)与函数防抖(防反跳)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。
<强>函数节流(节流阀)
函数节流是指一定时间内执行的操作只执行一次,也就是说即预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期,一个比较形象的例子是如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。
<强>函数防抖(防反跳)
函数防抖是指在一定时间内,在动作被连续频繁触发的情况下,动作只会被执行一次,也就是说当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间,所以短时间内的连续动作永远只会触发一次,比如说用手指一直按住一个弹簧,它将不会弹起直到你松手为止。
<强>时间戳
<强>定时器
看完了这篇文章,相信你对JavaScript中防抖节流的案例分析有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
