JS系列之防抖節(jié)流

everfight 發(fā)布于2019-08-23 14:40 / 733人閱讀

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

概念

函數(shù)節(jié)流和函數(shù)防抖，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。

函數(shù)節(jié)流（throttle）與函數(shù)防抖（debounce）都是為了限制函數(shù)的執(zhí)行頻次，以優(yōu)化函數(shù)觸發(fā)頻率過高導致的響應速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。

函數(shù)節(jié)流（throttle）

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

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

函數(shù)防抖（debounce）

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

時間戳

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防抖與節(jié)流 js函數(shù)節(jié)流防抖 VUE防抖

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

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

scroll優(yōu)化之防抖與節(jié)流

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

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

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

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

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

Mr_houzi 2019-08-26 13:33 評論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é)流

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

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