節流事件

rickchen 發布于2019-08-20 12:07 / 2920人閱讀

摘要：有一些事件是會頻繁觸發的，比如如果在這些事件上綁定函數，并且這些函數要進行耗性能的計算，那么會導致頁面忽急忽緩，反應遲鈍這時就需要使用節流事件來控制函數被觸發的頻率。

有一些事件是會頻繁觸發的，比如scroll resize mousemove keyup
如果在這些事件上綁定函數，并且這些函數要進行耗性能的計算，那么會導致頁面忽急忽緩，反應遲鈍,這時就需要使用節流事件來控制函數被觸發的頻率。

function handler() {
    // 處理一些耗性能的計算
    // 或者發送ajax請求

    console.log("2333");
}

$(window).scroll(handler); // 反復觸發handler，影響性能

方法一 setTimeout

var timer = 0;

$(window).scroll(function() {
    if (!timer) {
        timer = setTimeout(function() {
            handler();
            timer = 0;
        }, 1000);
    }
});

方法二 setInterval

// scroll雖然綁定了一個會頻繁觸發的函數，但是該函數只是改變scrolled的值，不會影響性能

var scrolled = false;

$(window).on("scroll", function() {
    scrolled = true;
});

setInterval(function() {
    if (scrolled) {
        handler();
        scrolled = false;
    }
}, 1000);

想象一個場景：實時搜索

在輸入框輸入關鍵詞后就要馬上顯示結果，通常做法是在keyup上綁定handler處理函數，發送ajax請求。但是如果用戶輸入速度很快，那么keyup會觸發多次，發送多個ajax請求，而我們只是想要在用戶停止輸入的時間超過1s后才發送ajax

這和前面的scroll事件又有些不同，在這里我只想handler函數在keyup觸發后執行一次
前面兩種方法只是減少了handler()觸發的頻率，但是仍然會觸發多次

方法三 clearTimeout

var searchTimeout = null;
$("#input").on("keyup", function(event) {
    //每次keyup時直接取消上次計時器，只有當keyup超過1s時才執行handler
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
        handler();
    }, 1000);
});

參考：《jQuery基礎教程》

GPU云服務器云服務器函數節流節流保存字節流節流閥

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

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

前端優化 —— 函數的節流和防抖

摘要：文件為函數要傳入的參數返回事件處理函數添加事件監聽節流函數一般用于事件的情況較多，因為這些事件的觸發是連續性的，需要在一個時間間隔內只觸發一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 閱讀原文前言在前端開發當中我們經常會綁定一些事件觸發的某些程序執行，有時這些事件會連續觸發，如瀏覽器窗口 s...

ralap 2019-08-23 12:18 評論0 收藏0
js 防抖節流 JavaScript

摘要：此時需要采用防抖和節流的方式來減少調用頻率，同時不影響原來效果。函數防抖當持續觸發事件時，一段時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定的時間到來之前就觸發了事件，延時重新開始。 js 防抖節流 JavaScript 實際工作中，通過監聽某些事件，如scroll事件檢測滾動位置，根據滾動位置顯示返回頂部按鈕；如resize事件，對某些自適應頁面調整DOM的渲染；如ke...

int64 2019-08-23 14:48 評論0 收藏0
詳談js防抖和節流

摘要：本文會分別介紹什么是防抖和節流，它們的應用場景，和實現方式。防抖和節流都是為了解決短時間內大量觸發某函數而導致的性能問題，比如觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。本文由小芭樂發表 0. 引入首先舉一個例子：模擬在輸入框輸入后做ajax查詢請求，沒有加入防抖和節流的效果，這里附上完整可執行代碼：沒有防抖 ...

shevy 2019-08-23 13:54 評論0 收藏0
JS專題之節流函數

摘要：一什么是節流節流函數就是讓事件處理函數在大于等于執行周期時才能執行，周期之內不執行，即事件一直被觸發，那么事件將會按每小段固定時間一次的頻率執行。我們通過一個簡單的示意來理解節流函數可以用時間戳和定時器兩種方式進行處理。本文共 2000 字，讀完只需 8 分鐘上一篇文章講了去抖函數，然后這一篇講同樣為了優化性能，降低事件處理頻率的節流函數。一、什么是節流？節流函數（thrott...

huaixiaoz 2019-08-23 14:01 評論0 收藏0
JS函數節流和函數防抖

摘要：為什么需要函數防抖和函數節流在瀏覽器中某些計算和處理要比其他的昂貴很多。函數防抖如果一個事件被頻繁觸發多次，并且觸發的時間間隔過短，則防抖函數可以使得對應的事件處理函數只執行最后觸發的一次。函數防抖可以把多個順序的調用合并成一次。 1.為什么需要函數防抖和函數節流？在瀏覽器中某些計算和處理要比其他的昂貴很多。例如DOM操作比起非DOM交互需要更多的內存和CPU占用時間。連續嘗試進行...

doodlewind 2019-08-23 13:48 評論0 收藏0
防抖（debounce）和節流（throttle）---解決事件頻繁觸發造成頁面卡死

摘要：防抖和節流連續觸發觸發頻率很高的時間，不進行優化，會出現頁面卡頓現象。節流防抖是多次觸發事件，目標函數只執行一次，不管觸發這些事件用了多少時間。防抖（debounce）和節流（throttle）連續觸發（觸發頻率很高）的時間，不進行優化，會出現頁面卡頓現象。常見的需要優化的事件：鼠標事件: mousemove（拖拽） mouseover(劃過) mouseWheel(滾屏)...

IamDLY 2019-08-02 15:21 評論0 收藏0