防抖节流

防抖节流

我们可能都会遇到这样的一个问题，网页卡了的时候，或者是闲着无聊，胡乱点击按钮，但是这样的结果就是这个按钮绑定的事件函数将会根据你点击的次数不断触发。

这样无疑会给性能带来一些问题，甚至有些手速快的同hai，一分钟能点一百多次。那我们就需要想点办法来改进一下，防止这样的同hai对我们的网页产生不好的印象。

<!--首先我来定义一个按钮，这个按钮绑定了一个点击事件-->
<div>
<button id='btnClick'></button>
</div>

接下来我们来绑定这个事件函数

var btnItem=document.getElementById('btnClick');
var clickCount=0;
btn.addEventListener('click',function(){
    clickCount++;
})

如果一个网页这样写的话，那么用户点击按钮多少次就会执行多少次事件函数。我们可以改进一下

如，点了按钮1s钟之内，用户将无法对按钮进行点击，或者是点击无效

btn.addEventListener('click',()=>{
    setTimeout(()={
        console.log(clickCount++);
    },1000);
})

这样写的话我们就可以看到一秒钟会打印出一个clickCount

借用一位博主的话来说，防抖就是法师放技能读条，节流就像是我们在普通攻击的时候，无论按多少次，都会只有设定的值触发

函数防抖（debounce）

函数防抖就是函数触发后一段时间无法再次进行触发，必须超过某个等待时间否则函数不执行。

机制：

1. 事件函数不会立即执行
2. 在等待时间内触发事件，将会重新进入等待时间
3. 用户等待时间大于设定好的等待时间，则会再次触发时间函数

function Debounce(handle,wait){
    let timer=null;
    return function(){
        let that=this;
        let _argument=argument;
        clearTimeout(timer);
        timer=setTimeout({
            handle.apply(that,_argument);
        },wait)
    }
}
function handle(){
    console.log('调用成功');
}
DOM.addEventListener('click',Debounce(handle,wait),false);

函数节流（throttle）

节流就是在一段时间内，只能触发一次函数，如果触发多次的话，只算作一次触发。

我们来说下我们想利用的这个节流的机制：

1. 一个函数被执行（计时为A）
2. 另一个函数被执行（计时为B）
3. （B-A<等待时间）不执行，否则就执行

我们有两种实现节流的方式：事件戳 和 定时器

那我们把这个封装一下吧

//节流（时间戳版）
function throttle (handle,wait){
    let lastTime=0;
    return function(){
    var that=this;
    var nowTime=new Date().getTime();
    var _argument=argument;
        if(nowTime-lastTime>wait){
            handle.apply(that, _argument);
            lastTime=nowTime;
        }
    }
}
function handle(){
    console.log('调用成功');
}

//使用的时候只需要在绑定事件函数的时候使用即可
DOM.addEventListener('click',throttle(handle,wait),false) 

//节流(定时器版)
function throttle (handle,wait){
    let Timer=null;
    return function(){
    var that=this;
    var _argument=argument;
    if(!Timer){
        Timer=setTimeout({
            handle.apply(that, _argument);   
            Timer=null;
        },wait)
    }
       
    }
}
function handle(){
    console.log('调用成功');
}

节流和防抖区别

函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

应用

DeBounce:

• search搜索联想，使用防抖
• window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

Thtottle:

• 鼠标不断点击触发，mousedown点击只触发一次
• 监听鼠标滚动事件，滑倒底部加载更多