国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

函數防抖與函數節流

J4ck_Chan / 731人閱讀

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

前言

有一些瀏覽器事件可以在很短的事件內快速觸發多次，例如 調整窗口大小 或 向下滾動 頁面。例如，如果將事件監聽器綁定到窗口滾動事件上，并且用戶繼續非常快速地向下滾動頁面，你的事件可能會在3秒的范圍內被觸發數千次。這可能會導致一些嚴重的性能問題,

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

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

函數防抖

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

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

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

document.addEventListener("scroll", debounce(foo, 50));
函數節流

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

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92052.html

相關文章

  • 小菊花課堂之JS的防抖與節流

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

    leoperfect 評論0 收藏0

  • 小菊花課堂之JS的防抖與節流

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

    Yangder 評論0 收藏0

  • JavaScript：函數防抖與函數節流

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

    elina 評論0 收藏0

  • 高級函數技巧-函數防抖與節流

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

    whinc 評論0 收藏0

  • 前端進擊的巨人（八）：淺談函數防抖與節流

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

    _Zhao 評論0 收藏0

  • 防抖與節流（源碼學習）

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

    instein 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<