Javascript-函數節(jié)流與函數防抖

ivan_qhz 發(fā)布于2019-08-23 12:10 / 1308人閱讀

摘要：函數節(jié)流名詞解釋函數節(jié)流連續(xù)執(zhí)行函數，每隔一定時間執(zhí)行函數使用場景鼠標移動，事件元素動態(tài)定位，對象的和事件等等函數節(jié)流簡單實現上次執(zhí)行的時間定時器默認間隔為現在的時間當前距離上次執(zhí)行的時間小于設置的時間間隔清除定時器時間后，執(zhí)行函數當前距離

函數節(jié)流（throttle） 名詞解釋

函數節(jié)流（throttle）：連續(xù)執(zhí)行函數，每隔一定時間執(zhí)行函數

使用場景

鼠標移動，mousemove 事件
DOM 元素動態(tài)定位，window對象的resize和scroll 事件
等等...

函數節(jié)流（throttle）簡單實現

    function throttle(fn, delay) {
        var last; // 上次執(zhí)行的時間
        var timer; // 定時器
        delay || (delay = 250); // 默認間隔為250ms
        return function() {
            var context = this;
            var args = arguments;
            var now = +new Date(); // 現在的時間
            if (last && now < last + delay) { // 當前距離上次執(zhí)行的時間小于設置的時間間隔
                clearTimeout(timer); // 清除定時器
                timer = setTimeout(function() { // delay時間后，執(zhí)行函數
                    last = now;
                    fn.apply(context, args);
                }, delay);
            } else { // 當前距離上次執(zhí)行的時間大于等于設置的時間，直接執(zhí)行函數
                last = now;
                fn.apply(context, args);
            }
        };
    }

函數防抖（debounce） 名詞解釋

函數防抖（debounce）：空閑時間必須大于或等于一定值的時候，才會執(zhí)行調用方法

使用場景

文本輸入keydown 事件
等等...

函數防抖（debounce）簡單實現

    function debounce(fn, delay) {
        var timer; // 定時器
        delay || (delay = 250); // 默認空閑時間250ms
        return function() {
            var context = this;
            var args = arguments;
            clearTimeout(timer); // 清除定時器
            timer = setTimeout(function() { // delay時間后，執(zhí)行函數
                fn.apply(context, args);
            }, delay);
        };
    }

云服務器 GPU云服務器 VUE防抖與節(jié)流函數節(jié)流 js函數節(jié)流 javascript 函數

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

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

說說JavaScript中函數的防抖 (Debounce) 與節(jié)流 (Throttle)

摘要：基礎防抖我們現在寫一個最基礎的防抖處理標記事件也做如下改寫現在試一下，我們會發(fā)現只有我們停止?jié)L動秒鐘的時候，控制臺才會打印出一行隨機數。為何要防抖和節(jié)流有時候會在項目開發(fā)中頻繁地觸發(fā)一些事件,如 resize、 scroll、 keyup、 keydown等，或者諸如輸入框的實時搜索功能，我們知道如果事件處理函數無限制調用，會大大加重瀏覽器的工作量，有可能導致頁面卡頓影響體驗；后臺...

yanwei 2019-08-23 18:10 評論0 收藏0
JavaScript：函數防抖與函數節(jié)流

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

elina 2019-08-23 15:26 評論0 收藏0
JavaScript之節(jié)流與防抖

摘要：個人博客原文地址背景我們在開發(fā)的過程中會經常使用如等事件，如果正常綁定事件處理函數的話，有可能在很短的時間內多次連續(xù)觸發(fā)事件，十分影響性能。個人博客原文地址背景我們在開發(fā)的過程中會經常使用如scroll、resize、touchmove等事件，如果正常綁定事件處理函數的話，有可能在很短的時間內多次連續(xù)觸發(fā)事件，十分影響性能。因此針對這類事件要進行節(jié)流或者防抖處理節(jié)流節(jié)流的意思...

wayneli 2019-08-23 10:33 評論0 收藏0
JavaScript防抖和節(jié)流

摘要：概念函數防抖和函數節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行代碼的一種手段。防抖任務頻繁觸發(fā)的情況下，只有任務觸發(fā)的間隔超過指定間隔的時候，任務才會執(zhí)行。節(jié)流指定時間間隔內只會執(zhí)行一次任務一定時間內方法只跑一次。概念函數防抖和函數節(jié)流，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。防抖：任務頻繁觸發(fā)的情況下，只有任務觸發(fā)的間隔超過指定間隔的時候，任務才會執(zhí)行。節(jié)流：指定時間間隔內只會執(zhí)行一次任...

DevWiki 2019-08-23 17:09 評論0 收藏0
js 防抖 節(jié)流 JavaScript

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

int64 2019-08-23 14:48 評論0 收藏0