关于节流和防抖的理解和函数实现

节流和防抖，以前我经常把他们搞混掉。后来才知道各种代表的不同含义

 

一句话来说：

节流：不停触发时，每隔n秒执行1次。

防抖：不停触发时，只触发1次。

 

使用onmousemove时间来看看效果吧。

先来看看没有节流和防抖的样子：触发太快了。

简单代码：

(function(){
    //原始方式
    let num=1
    let fangdou=document.querySelector("#wu")
    function count(){
        fangdou.innerHTML=num++
    }
    fangdou.onmousemove=count
})();

 

在来看下防抖的样子：在不断触发的时候，只执行了一次需要的。

实现：

(function(){
    //防抖
    let num=1
    let fangdou=document.querySelector("#fangdou")
    function count(){
        fangdou.innerHTML=num++
    }
    //去抖 可用于做滚动下一页 n时间内，频繁触发的事件，为1次
    function debounce(func,time){
        let timeout
        return function () {
            if(timeout) clearTimeout(timeout)
            timeout=setTimeout(()=>{
                func.apply(this,arguments)
            },time)
        }
    }
    fangdou.onmousemove=debounce(count,500)
})();

 

还有节流的方式：在不断触发的时候，每个一段时间触发一次。

实现：

(function(){
    //节流
    let num=1
    let jieliu=document.querySelector('#jieliu')
    function count(){
        jieliu.innerHTML=num++
    }
    function throttle(func,time){
        let prev=0
        return ()=>{
            let now= +new Date
            if(now-prev > time){
                func.apply(this,arguments)
                prev=now
            }
        }
    }
    jieliu.onmousemove=throttle(count,500)
})();