JS函数防抖与函数节流
概念
函数防抖(debounce)
当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间
函数节流(throttle)
预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期
函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。
比如如下的情况:
- window对象的resize、scroll事件
- 拖拽时的mousemove事件
- 文字输入、自动完成的keyup事件
区别
可以拿我们平时坐电梯为例来形象地表述二者的区别
函数防抖:如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时)。
函数节流 :保证如果电梯第一个人进来后,10秒后准时运送一次,这个时间从第一个人上电梯开始计时,不等待,如果没有人,则不运行
实现
函数防抖(debounce)
function _debounce(fn,wait){
var timer = null;
return function(){
clearTimeout(timer)
timer = setTimeout(()=>{
fn()
},wait)
}
}
function _log(){
console.log(1)
}
window.onscroll = _debounce(_log,500);
但是,仔细想想,上面的实现方式还是有一定的缺点。如果页面很长,我们一直在滚动页面,那_log方法就一直不会被执行。所以我们可以升级一下上述的防抖方法。
function _debounce(fn,wait,time){
var previous = null; //记录上一次运行的时间
var timer = null;
return function(){
var now = +new Date();
if(!previous) previous = now;
//当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话,就主动执行一次
if(now - previous > time){
clearTimeout(timer);
fn();
previous = now;// 执行函数后,马上记录当前时间
}else{
clearTimeout(timer);
timer = setTimeout(function(){
fn();
},wait);
}
}
}
function _log(){
console.log(1)
}
window.onscroll = _debounce(_log,500,2000);
函数节流(throttle)
function _throttle(fn, time) {
let _self = fn,
timer,
firstTime = true //记录是否是第一次执行的flag
return function() {
let args = arguments, //解决闭包传参问题
_me = this //解决上下文丢失问题
if(firstTime) { //若是第一次,则直接执行
_self.apply(_me, args)
return firstTime = false
}
if(timer) { //定时器存在,说明有事件监听器在执行,直接返回
return false
}
timer = setTimeout(function() {
clearTimeout(timer)
timer = null
_self.apply(_me, args)
}, time || 500)
}
}
function _log(){
console.log(1)
}
window.onscroll = _throttle(_log,500);
案例
函数防抖
每一次的用户输入都触发邮箱格式检测事件,造成了浪费,于是设置两次输入之间的时间间隔大于800ms时(用户结束输入时),再执行检查邮箱格式。
Const filter= = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
$("#email").on("keyup",checkEmail());
function checkEmail(){
let timer=null;
return function (){
clearTimeout(timer);
timer=setTimeout(function(){
console.log('执行检查');
},800);
}
}
当第一次输入事件触发,设置定时:在800ms之后执行检查。
假如只过了100ms,上次的定时还没执行,此时清除定时,重新定时800ms。
紧跟着又来了一次输入,上次定时依然没执行,再次清除定时,重新定时800ms。
直到最近一次的输入,后面没有紧邻的输入了,这最近一次的输入定时计时结束,终于执行了检查代码。
结果是:如果两次输入触发事件的时间间隔不足800ms的,不执行检查代码。 两次触发事件的时间间隔大于800ms了,则前面的执行检查。这就是传说中的函数防抖。
函数节流:
一个加载新闻的列表页,只要滚动到页面的最下面就继续加载一部分新闻出来,即滚动加载。这时,就要监听滚动事件,判断若滚动到页面底部了,就执行加载新闻的代码。
$(window).scroll(loadMore());
function loadMore(){
var canRun=true;
return function(){
if(!canRun){return;}
canRun=false;
setTimeout(function(){
console.log("执行滚动事件");
var docHeight=$(document).height();
var winHeight=$(window).innerHeight();
var scrollDistance=$(window).scrollTop();
if( docHeight - (winHeight+scrollDistance) <=100 ){
console.log('加载中...');
}
canRun=true;
},600);
}
}
由于滚动事件非常频繁,稍微滚动一下就会触发许多次,如果频繁触发的滚动,每一次都去检查是否到页面底部了再次造成了浪费。
于是设置一个开关,一次只能有一个触发执行,并对执行设置计时一段时间再执行,执行完毕之后再解锁。这就是函数节流。