成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

函數(shù)的防抖和節(jié)流

MasonEast / 1273人閱讀

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

目的：節(jié)約性能開銷，避免多次頻繁的觸發(fā)業(yè)務邏輯造成頁面卡頓。

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

防抖 
一個需要頻繁觸發(fā)的函數(shù)，在規(guī)定的時間內，只執(zhí)行最后一次，前面的觸發(fā)不執(zhí)行。(當持續(xù)觸發(fā)事件的時候，函數(shù)是完全不執(zhí)行的，等最后一次觸發(fā)結束的一段時間之后，再去執(zhí)行)
原理

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

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);
節(jié)流 
一個函數(shù)執(zhí)行一次后只有大于設定的執(zhí)行周期才會執(zhí)行第二次。(指連續(xù)觸發(fā)事件但是在 n 秒中只執(zhí)行一次函數(shù))
原理

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

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);

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

轉載請注明本文地址：http://systransis.cn/yun/109961.html

相關文章

  • 函數(shù)的防抖和節(jié)流是個啥？？？

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

    edagarli 評論0 收藏0

  • 剖析前端開發(fā)中的防抖和節(jié)流

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

    andong777 評論0 收藏0

  • 剖析前端開發(fā)中的防抖和節(jié)流

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

    LeexMuller 評論0 收藏0

  • 小菊花課堂之JS的防抖與節(jié)流

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

    leoperfect 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<