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);  

        }  

}  

由于滚动事件非常频繁，稍微滚动一下就会触发许多次，如果频繁触发的滚动，每一次都去检查是否到页面底部了再次造成了浪费。

于是设置一个开关，一次只能有一个触发执行，并对执行设置计时一段时间再执行，执行完毕之后再解锁。这就是函数节流。