2019.04.04 防抖和節流

SegmentFault 發布于2019-08-23 17:57 / 601人閱讀

摘要：只記錄簡單實現方法用以明白原理防抖，去抖動。周期結束后，又有事件觸發，開始新的周期。節流策略也分前緣和延遲兩種。簡單版定時器期間，只執行最后一次操作

只記錄簡單實現方法、用以明白原理

防抖

debounce，去抖動。策略是當事件被觸發時，設定一個周期延遲執行動作，若期間又被觸發，則重新設定周期，直到周期結束，執行動作。 這是debounce的基本思想，在后期又擴展了前緣debounce，即執行動作在前，然后設定周期，周期內有事件被觸發，不執行動作，且周期重新設定

// 暴力版： 定時器期間，有新操作時，清空舊定時器，重設新定時器
var debounce = (fn, wait) => {
    let timer, timeStamp=0;
    let context, args;
 
    let run = ()=>{
        timer= setTimeout(()=>{
            fn.apply(context,args);
        },wait);
    }
    let clean = () => {
        clearTimeout(timer);
    }
 
    return function(){
        context=this;
        args=arguments;
        let now = (new Date()).getTime();
 
        if(now-timeStamp < wait){
            console.log("reset",now);
            clean();  // clear running timer 
            run();    // reset new timer from current time
        }else{
            console.log("set",now);
            run();    // last timer alreay executed, set a new timer
        }
        timeStamp=now;
 
    }
 
}

節流

throttling，節流的策略是，固定周期內，只執行一次動作，若有新事件觸發，不執行。周期結束后，又有事件觸發，開始新的周期。 節流策略也分前緣和延遲兩種。與debounce類似，延遲是指 周期結束后執行動作，前緣是指執行動作后再開始周期。

// 簡單版： 定時器期間，只執行最后一次操作
var throttling = (fn, wait) => {
    let timer;
    let context, args;
 
    let run = () => {
        timer=setTimeout(()=>{
            fn.apply(context,args);
            clearTimeout(timer);
            timer=null;
        },wait);
    }
 
    return function () {
        context=this;
        args=arguments;
        if(!timer){
            console.log("throttle, set");
            run();
        }else{
            console.log("throttle, ignore");
        }
    }
 
}

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

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

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

詳談js防抖和節流

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

shevy 2019-08-23 13:54 評論0 收藏0
徹底弄懂函數防抖和函數節流

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

Mr_houzi 2019-08-26 13:33 評論0 收藏0
函數防抖和節流

摘要：應用場景給按鈕加函數防抖防止表單多次提交。對于輸入框連續輸入進行驗證時，用函數防抖能有效減少請求次數。參考十分鐘學會防抖和節流輕松理解函數節流和函數防抖函數防抖和節流防抖對于觸發非常頻繁又沒有必要每次都執行的事件，希望合并到一次去執行；實現思路：事件觸發后，在規定的時間范圍內如果事件重復觸發，那么忽略之前觸發的事件，并且重新開始計時，直到某一次事件觸發后大于規定時間，我們才執...

daydream 2019-08-23 16:50 評論0 收藏0
JavaScript防抖和節流

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

DevWiki 2019-08-23 17:09 評論0 收藏0
函數的防抖和節流是個啥？？？

摘要：函數防抖和節流，都是控制事件觸發頻率的方法。封裝一個函數，讓持續觸發的事件監聽是我們封裝的這個函數，將目標函數作為回調傳進去，等待一段時間過后執行目標函數第二點實現了，再看第一點持續觸發不執行。曾經面試時候被問到過這個，年少的我一臉無知。。。后來工作中遇到了一個場景：輸入名稱的同時去服務器校驗名稱是否重復，但發現之前的代碼竟然都沒做限制，輸入一次發一次請求。簡直忍不了，就在項目的u...

edagarli 2019-08-23 18:35 評論0 收藏0