【js】什麼是函式節流與函式去抖

海瑞菌·部落格發表於2019-05-16
JS函式

函式節流

意思：節省流量，不會一直訪問。 | 指定時間內不執行，指定時間後執行。 | 一段時間內只執行一次

場景：

比如控制遊戲人物攻擊，時間內就算按得很快，也只能砍一刀，過後才能砍第二刀。

搜尋引擎聯想詞。搜尋框的oninput事件節流。

引數：一個函式，一個時間

返回：一個函式

對比時間進行處理

function throttle(func,time){
    let lastTime=null
    return function(){
        let now=new Date()
        if(now-lastTime-time > 0){
            func()
            lastTime = now
        }
    }
}
//呼叫
let run=throttle(function(){
    console.log(123)
},1000)
window.addEventListener('scroll',run)

function throttle(func,time){
    let prev=0;
    return function(){
        let now=Date.now()
        let _this=this;
        if(now-prev >= time){
            func.apply(this,arguments)
            prev = now
        }
    }
}

let d1=document.querySelector("#d1")
let input1=document.querySelector("#input1")
input1.onclick=throttle(function(){
    d1.innerText=parseInt(d1.innerText)+1
},1000)

 

函式防抖

意思：防止都抖動。空閒時間後只執行一次。

場景：

搜尋框的聯想詞，輸入框連續輸入文字時不會去查詢後臺介面，輸入暫停時才會去查詢介面

引數：一個函式，一個時間

返回：一個函式

上拉載入下一頁。當頁面滾動結束後，若在頁面底部，再執行載入。

輸入框，當使用者頻繁輸入時，不執行，停止輸入時執行

clearTimeout和setTimeout進行處理。

function debounce(func,time){
    let timer=null
    return function(){
        clearTimeout(timer)
        timer=setTimeout(()=>{
            func.apply(this,arguments)
        },time)
    }
}

 

懶載入

一屏一屏載入圖片，可以減少伺服器載入壓力

 

預載入

提前載入內容，但不渲染，或隱藏的。會加重伺服器壓力

 

更多知識點和詳細，之後補上

相關文章