函數(shù)防抖與函數(shù)節(jié)流

J4ck_Chan 發(fā)布于2019-08-22 11:15 / 775人閱讀

摘要：這可能會導致一些嚴重的性能問題如果在面試中討論構建應用程序和事件，如滾動窗口調整大小，或鍵盤按下的事件時，一定要提及函數(shù)防抖動和函數(shù)節(jié)流來提升頁面速度和性能。

前言

有一些瀏覽器事件可以在很短的事件內快速觸發(fā)多次，例如 調整窗口大小 或 向下滾動 頁面。例如，如果將事件監(jiān)聽器綁定到窗口滾動事件上，并且用戶繼續(xù)非?？焖俚叵蛳聺L動頁面，你的事件可能會在3秒的范圍內被觸發(fā)數(shù)千次。這可能會導致一些嚴重的性能問題,

如果在面試中討論構建應用程序和事件，如滾動、窗口調整大小，或鍵盤按下的事件時，一定要提及函數(shù)防抖動和函數(shù)節(jié)流來提升頁面速度和性能。

直接綁定函數(shù)到scroll事件是非常錯誤的決定，當用戶滾動頁面時，頁面可能會變得非常慢甚至未響應。而函數(shù)防抖和函數(shù)節(jié)流是解決這個問題的一種方式，通過限制需要經(jīng)過的事件，直至再次調用函數(shù),在處理一些高頻率觸發(fā)的 DOM 事件的時候，它們都能極大提高用戶體驗。

函數(shù)防抖

如果一個事件被頻繁觸發(fā)多次，并且觸發(fā)的時間間隔過短，則防抖函數(shù)可以使得對應的事件處理函數(shù)只執(zhí)行一次

// debounce函數(shù)用來包裹我們的事件處理方法
function debounce(fn, delay){
    // 持久化一個定時器
    let timer = null
    
    // 閉包函數(shù)可以訪問timer
    return function(){
        // 通過 this 和 arguments 獲得函數(shù)的作用域和參數(shù)
        let context = this
        let args = arguments
        // 如果事件被觸發(fā)，清除timer并重新開始計時
        clearTimeout(timer)
        timer = setTimeout(function() {
            fn.apply(context, args)
        }, delay)
    }
}

function foo(){
    console.log("You are scrolling!")
}

document.addEventListener("scroll", debounce(foo, 50));

函數(shù)節(jié)流

throttle 的概念理解稍微容易一些，如果一個事件被頻繁觸發(fā)多次，節(jié)流函數(shù)可以按照固定頻率去執(zhí)行對應的事件處理方法

function throttle(fn, threshold){
    var last
    
    var timer
    
    threshold || (threshold = 250)
    
    return function(){
        let context = this
        let args = arguments
        
        var now = +new Date()
        
        if(last&&now

GPU云服務器云服務器 VUE防抖與節(jié)流函數(shù)節(jié)流 js函數(shù)節(jié)流函數(shù)中定義函數(shù)

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/92052.html

小菊花課堂之JS的防抖與節(jié)流

摘要：文章來源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發(fā)中，我們經(jīng)常會碰到一些會持...

leoperfect 2019-08-23 13:53 評論0 收藏0
小菊花課堂之JS的防抖與節(jié)流

摘要：文章來源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發(fā)中，我們經(jīng)常會碰到一些會持...

Yangder 2019-08-02 12:10 評論0 收藏0
JavaScript：函數(shù)防抖與函數(shù)節(jié)流

摘要：函數(shù)防抖簡單實現(xiàn)模擬請求獲取函數(shù)的作用域和變量清除定時器節(jié)流名詞解釋連續(xù)執(zhí)行函數(shù)，每隔一定時間執(zhí)行函數(shù)。效果函數(shù)防抖是某一段時間內只執(zhí)行一次函數(shù)節(jié)流是間隔時間執(zhí)行，不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內一定會執(zhí)行一次真正的事件處理函數(shù)。防抖（debounce）名詞解釋：在事件被觸發(fā)n秒后再執(zhí)行回調函數(shù)，如果在這n秒內又被觸發(fā)，則重新計時。使用場景：以百度輸入框例，比如你要查詢...

elina 2019-08-23 15:26 評論0 收藏0
高級函數(shù)技巧-函數(shù)防抖與節(jié)流

摘要：封裝方法也比較簡單，書中對此問題也進行了處理使用定時器，讓函數(shù)延遲秒后執(zhí)行，在此秒內，然后函數(shù)再次被調用，則刪除上次的定時器，取消上次調用的隊列任務，重新設置定時器。在實際開發(fā)中，函數(shù)一定是最實用最頻繁的一部分，無論是以函數(shù)為核心的函數(shù)式編程，還是更多人選擇的面向對象式的編程，都會有函數(shù)的身影，所以對函數(shù)進行深入的研究是非常有必要的。函數(shù)節(jié)流比較直白的說，函數(shù)節(jié)流就是強制規(guī)定一...

whinc 2019-08-22 11:21 評論0 收藏0
前端進擊的巨人（八）：淺談函數(shù)防抖與節(jié)流

摘要：隆重請出主角防抖與節(jié)流。防抖與節(jié)流的異同相同都是防止某一時間段內，函數(shù)被頻繁調用執(zhí)行，通過時間頻率控制，減少回調函數(shù)執(zhí)行次數(shù)，來實現(xiàn)相關性能優(yōu)化。參考文章分鐘理解的節(jié)流防抖及使用場景函數(shù)防抖和節(jié)流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過春招系列面試下來，不少伙伴們還...

_Zhao 2019-08-23 15:37 評論0 收藏0
防抖與節(jié)流（源碼學習）

摘要：防抖與節(jié)流源碼學習最近自己擼了一個輪播圖，在點擊切換的時候，為了尋求更好的用戶體驗，引入了節(jié)流，在此記錄對源碼的學習過程源碼來源防抖函數(shù)防抖使用場景現(xiàn)在我們需要做一個搜索框，當用戶輸入文字，執(zhí)行事件的時候，需要發(fā)出異步請求去進行結果查詢。防抖與節(jié)流（源碼學習）最近自己擼了一個輪播圖，在點擊切換的時候，為了尋求更好的用戶體驗，引入了節(jié)流，在此記錄對源碼的學習過程源碼來源：unders...

instein 2019-08-22 17:12 評論0 收藏0