js的節流、防抖以及使用場景

介紹 😲

首先看一個沒有經過任何處理的🌰：

// 模擬一個輸出的函數
function input(value) {
    console.log(`輸入的內容${value}`)
}
const ipt = document.getElementById('input')

ipt.addEventListener("keyup",function(e){
     input(e.target.value)
})

效果如下：

 

可以發現，只要按下鍵盤就會觸發函數調用，這樣在某些情況下會造成資源的浪費，在這些情況下，可能只需要在輸入完成后做請求，比如身份驗證等。

 

防抖處理

首先看下效果：

由此可以看出來，當我們重新頻繁的輸入后，並不會立即調用方法，只有在經過指定的間隔內沒有輸入的情況下才會調用函數方法；

代碼如下：

function input(value) {
        console.log(`輸入的內容${value}`)
    }
const ipt = document.getElementById('input')

function debounce(fun,delay){
    let timer ;
    return function(args){
        const that = this
        clearTimeout(timer)
        timer = setTimeout(function(){
            fun.call(that,args)
        },delay)
    }
   }
const debounceInput = debounce(input,500)
ipt.addEventListener("keyup",function(e){
    debounceInput(e.target.value)
})

 

節流處理

節流就是在規定的時間間隔呢，重復觸發函數，只有一次是成功調用

先看下效果：

可以看到在一直輸入的情況下每隔一段時間會觸發一次函數

代碼如下：

function input(value) {
        console.log(`輸入的內容${value}`)
    }
const ipt = document.getElementById('input')

function throttle(fun,delay){
    let last,timer;
    return function(args){
        const that = this
        const now = +new Date()
        if(last && now < last + delay){
            clearTimeout(timer)
            timer = setTimeout(function(){
                fun.call(that,args)
            },delay)
        }else{
            last = now
            fun.call(that,args)
        }
    }
}
const throttleInput = throttle(input,1000)
ipt.addEventListener("keyup",function(e){
    throttleInput(e.target.value)
})

方法總結 😴

• 防抖和節流都是為了解決頻繁觸發某個事件的情況造成的性能消耗。
• 防抖就是在出發后的一段時間內執行一次，例如：在進行搜索的時候，當用戶停止輸入后調用方法，節約請求資源
• 節流就是在頻繁觸發某個事件的情況下，每隔一段時間請求一次，類似打游戲的時候長按某個按鍵，動作是有規律的在間隔時間觸發一次