函數的防抖和節流

MasonEast 發布于2019-08-26 14:00 / 1251人閱讀

摘要：當持續觸發事件的時候，函數是完全不執行的，等最后一次觸發結束的一段時間之后，再去執行原理第一次調用函數創建一個定時器，指定的時間間隔后運行代碼。第二次調用函數時，它會清除前一次的定時器并設置另一個。

目的：節約性能開銷，避免多次頻繁的觸發業務邏輯造成頁面卡頓。

應用場景：節流和防抖的核心其實就是限制某一個方法被頻繁觸發，
比如說DOM事件的監聽回調，input的keyup、keydown，window.scroll,window.resize事件，按鈕連續{{BANNED}}點擊導致無限制發送接口請求等應用場景

防抖

一個需要頻繁觸發的函數，在規定的時間內，只執行最后一次，前面的觸發不執行。(當持續觸發事件的時候，函數是完全不執行的，等最后一次觸發結束的一段時間之后，再去執行)

原理

第一次調用函數創建一個定時器，指定的時間間隔后運行代碼。第二次調用函數時，它會清除前一次的定時器并設置另一個。

let debounce = function(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
};
let box = document.getElementById("app");
box.onmousemove = debounce(function(e) {
  box.innerHTML = `${e.clientX}, ${e.clientY}`;
}, 100);

節流

一個函數執行一次后只有大于設定的執行周期才會執行第二次。(指連續觸發事件但是在 n 秒中只執行一次函數)

原理

用時間戳來判斷是否已到回調該執行時間，記錄上次執行的時間戳，然后每次觸發 scroll 事件執行回調，回調中判斷當前時間戳距離上次執行時間戳的間隔是否已經到達規定時間段，如果是，則執行，并更新上次執行的時間戳，這樣循環下去

function throttle(func, delay) {
  let run = true;
  return function() {
    if (!run) {
      return;
    }

    run = false;
    setTimeout(() => {
      func.apply(this, arguments);
      run = true;
    }, delay);
  };
}

box.onmousemove = throttle(function(e) {
  box.innerHTML = `${e.clientX}, ${e.clientY}`;
}, 500);

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

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

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

函數的防抖和節流是個啥？？？

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

edagarli 2019-08-23 18:35 評論0 收藏0
剖析前端開發中的防抖和節流

摘要：運用防抖和節流可以有效降低代碼的執行頻率，從而解決高頻率事件的頁面卡頓問題。在階段布局，最終確定顯示的位置和大小。在函數中，首先定義了一個空的定時器變量，用來計算時間間隔。還有一點要注意，在中一定要清楚定時器，不然會影響的條件判斷。啥是節流？節流是保證在一段時間內，代碼只執行了一次。這個一段時間內指的是不管用戶操作了幾次，最終僅執行一次。比如說一個按鈕，用戶狂點按鈕，但是如果用節流...

andong777 2019-08-30 15:56 評論0 收藏0
剖析前端開發中的防抖和節流

摘要：運用防抖和節流可以有效降低代碼的執行頻率，從而解決高頻率事件的頁面卡頓問題。在階段布局，最終確定顯示的位置和大小。在函數中，首先定義了一個空的定時器變量，用來計算時間間隔。還有一點要注意，在中一定要清楚定時器，不然會影響的條件判斷。啥是節流？節流是保證在一段時間內，代碼只執行了一次。這個一段時間內指的是不管用戶操作了幾次，最終僅執行一次。比如說一個按鈕，用戶狂點按鈕，但是如果用節流...

LeexMuller 2019-08-26 13:35 評論0 收藏0
小菊花課堂之JS的防抖與節流

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發中，我們經常會碰到一些會持...

leoperfect 2019-08-23 13:53 評論0 收藏0