節流和防抖，以前我經常把他們搞混掉。後來才知道各種代表的不同含義

一句話來說：

節流：不停觸發時，每隔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 ()=>{
            
 
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)
})();