函数的防抖与节流-js

函数函数我们先来看一看防抖和节流比较精炼的定义：

防抖： 指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

节流：连续发生的事件在n秒内只执行一次

相信，看完上面说的定义后，有些人还是不能很好的明白他们之间的区别，那么就接下来谈一谈我对它们的理解吧。

防抖（debounce）

防抖防抖，顾名思义，就是防止手抖么，你想一下你手抖会干什么（？？？停止开车）比如一个按钮，点一下向服务器发送一个请求，你手一抖，点了好几下，一下就向服务器发了好几次请求，这不浪费时间资源么。这时候，就要有个防抖函数来帮帮你了。

当你点击这个按钮后，不管你手怎么抖，一直抖个不停的点这个按钮，都只向服务器发送一次请求，只有过了一段时间后，确定了你手不再抖后（在这一段时间你都没有再点这个按钮），你再去点击这个按钮，才会再次向服务器发送请求。

下面分析一下代码，你一定会更加的明白：

/*
@function 防抖函数（最后执行）
@param func {Function} 要执行的函数
@para wait {Number} 判断手不抖的时间
*/
const debounce=(func,wait)=>{
    let timeout;    //不能定义到里面，否则每次调用里面的函数，都会对timeout重新赋值
    return function(){
        if(timeout) clearTimeout(timeout) //这里使用timeout产生了闭包
        timeout = setTimeout(function(){
            func.apply(this)
        },wait)
    }
}
function btnClick(){
    console.log('发送一次请求')
}
$('#myBtn').click(debounce(btnClick,3000));

首先会执行第18行的debounce函数，返回一个匿名函数作为按钮点点击的回调。当点击一次按钮的时候，timeout为undefined，会执行第10行的代码，设置一个定时器。当你手抖（在wait时间内有点击了按钮）的时候，会执行第9行，将上一个定时器清除，然后再设置一个新的定时器。只有你手不抖了（在wait时间内没有点击按钮），就会执行第11行，执行点击按钮所要发送的请求服务。

可以看出来，这个防抖函数，是再确定你手不抖前的最后一次点击才发送的请求数据。但有时候你并不想这样啊，你觉得，当我第一次点击的时候就要发送数据，至于后面我手抖，你控制不让我发不久好了，这样我手抖的时候，发现数据已经请求过来了，我一高兴，手不就不抖了，好的，满足你的要求。

/*
@function 防抖函数（最初执行）
@param func {Function} 要执行的函数
@para wait {Number} 判断手不抖的时间
*/
const debounce=(func,wait)=>{
    let timeout;    
    return function(){
        if(timeout){
            clearTimeout(timeout);
        }else{
            func.apply(this)
        }
         timeout = setTimeout(function(){
            timeout =null
        },wait)
    }
}
function btnClick(){
    console.log('发送一次请求')
}
$('#myBtn').click(debounce(btnClick,3000));

相当于，在第一次点击，还没有设置定时器的时候，就先执行请求数据的函数，然后设置定时器用来防抖，后面不管怎么抖，timeout值都存在，只有再不抖后，才会将timeout设置为null，然后再点击的时候就又能请求数据了。

节流(throttle)

节流节流，顾名思义就是节省流量了，你想想，怎么才能节省流量。那不就减少请求呗。1秒请求3次，我改成3秒请求1次，那流量还不妥妥的节省下来了。就比如，你一个搜索框，按一下键盘向服务器发送一次请求，卡卡的，页面一直跟着你敲键盘在变化，你给老板说，看帅不，实时动态搜索，这时候老板上来就给你两耳刮子，说着，我可算知道为啥一个小项目就要买这么好的服务器了，都是你这玩意霍霍的。这时候，节流就能帮助到你了，设置个时间，这个时间内，不管怎么敲键盘，只请求一次数据，差不多输一个单词请求一次，大大节省了后台的压力，你的动态搜索也能够很好的实现。

估计这个还是比较好理解的，直接看代码就好了。

/*
@function 节流函数
@param func {Function} 要执行的函数
@para wait {Number} 时间间隔
*/
const throttle=(func,wait)=>{
    let previous  = 0;
    return function(){
        let nowtime = Date.now();
        if(nowtime-previous>wait){
            func.apply(this);
            previous = nowtime;
        }
    }
}
function keyUp(){
    console.log('搜索一次')
}
$('#myInput').keyup(throttle(btnClick,1000));

这个代码也比较好理解，每次按键抬起的时候，都会判断当前的时间和上一次执行搜索功能的时间的差值，判断要不要再进行一次搜索。

好了，函数的防抖与节流的区别和实现应该很清楚了。

作者：木木心丶
链接：https://www.jianshu.com/p/ea456c1cf34d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。