JS系列之防抖節流

everfight 發布于2019-08-23 14:40 / 658人閱讀

摘要：概念函數節流和函數防抖，兩者都是優化高頻率執行代碼的一種手段。函數節流與函數防抖都是為了限制函數的執行頻次，以優化函數觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。節流指定時間間隔內，只會執行最后一次任務。

概念

函數節流和函數防抖，兩者都是優化高頻率執行js代碼的一種手段。

函數節流（throttle）與函數防抖（debounce）都是為了限制函數的執行頻次，以優化函數觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。

函數節流（throttle）

函數節流是指一定時間內執行的操作只執行一次，也就是說即預先設定一個執行周期，當調用動作的時刻大于等于執行周期則執行該動作，然后進入下一個新周期。
節流：指定時間間隔內，只會執行最后一次任務。

function debounce(fn, wait) {   
    var timeout = null;   
    return function() {       
        if(timeout !== null) clearTimeout(timeout);       
        timeout = setTimeout(fn, wait);   
    }
}
// 處理函數
function handle() {   
    console.log(Math.random());
}
// 滾動事件
window.addEventListener("scroll", debounce(handle, 1000));

函數防抖（debounce）

函數防抖是指在一定時間內，在動作被連續頻繁觸發的情況下，動作只會被執行一次，也就是說當調用動作過n毫秒后，才會執行該動作，若在這n毫秒內又調用此動作則將重新計算執行時間，所以短時間內的連續動作永遠只會觸發一次。
防抖：指定時間間隔內，只會執行第一次任務。

時間戳

var throttle = function(func, delay) {           
    var prev = Date.now();           
    return function() {               
        var context = this;               
        var args = arguments;               
        var now = Date.now();               
        if (now - prev >= delay) {                   
            func.apply(context, args);                   
            prev = Date.now();               
        }           
    }       
}       
function handle() {           
    console.log(Math.random());       
}       
window.addEventListener("scroll", throttle(handle, 1000));

定時器

var throttle = function(func, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener("scroll", throttle(handle, 1000));

云服務器 GPU云服務器 VUE防抖與節流 js函數節流防抖 VUE防抖

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

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

scroll優化之防抖與節流

摘要：這個優化方案是參照前端性能高性能滾動及頁面渲染優化在這里簡單的把兩個方式寫出來，以便快速了解。。這個優化方案是參照【前端性能】高性能滾動 scroll 及頁面渲染優化在這里簡單的把兩個方式寫出來，以便快速了解。。第一種：防抖（也就是滾動結束才執行）演示：showImg(https://segmentfault.com/img/bVG5f5?w=448&h=340); 閉包： ...

littleGrow 2019-08-22 10:45 評論0 收藏0
JS系列之目錄

摘要：設計模式資源整理操作符小知識點實現發郵件功能數據結構與算法資源整理跨域函數的合成與柯里化系列之防抖節流系列之正則系列之系列之系列之編碼系列之系列之操作符對象中的坐標檢測對象或數組系列之機制系列之構造對象系列之總結系列之淺復制與深復制系列之對 Javascript設計模式資源整理JS操作符JS小知識點JS實現發郵件功能數據結構與算法資源整理跨域函數的合成與柯里化JS系列之防抖節流JS系列...

AaronYuan 2019-08-23 14:39 評論0 收藏0
徹底弄懂函數防抖和函數節流

摘要：若時間差大于間隔時間，則立刻執行一次函數。不同點函數防抖，在一段連續操作結束后，處理回調，利用和實現。函數防抖關注一定時間連續觸發的事件只在最后執行一次，而函數節流側重于一段時間內只執行一次。原博客地址，歡迎star 函數防抖和節流函數防抖和函數節流：優化高頻率執行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標的mousemove、mouseover...

Mr_houzi 2019-08-26 13:33 評論0 收藏0
前端進擊的巨人（八）：淺談函數防抖與節流

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

_Zhao 2019-08-23 15:37 評論0 收藏0
性能-防抖和節流

摘要：一概述為了提高頁面性能，有時需要對高頻率觸發的事件進行防抖或者節流處理。強調一系列連續觸發的事件。防抖的目的就是把，，構成的系列或者，構成的系列事件合并成一個，即只執行或者或者。節流一段時間內的事件，只處理一次，即只調用一次事件處理程序。一、概述為了提高頁面性能，有時需要對高頻率觸發的事件（scrllo, resize, mousemove, touchmove）進行防抖（Debo...

zhjx922 2019-08-20 17:43 評論0 收藏0