成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

MasonEast / 1310人閱讀

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

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

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

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

第一次調(diào)用函數(shù)創(chuàng)建一個定時器，指定的時間間隔后運(yùn)行代碼。第二次調(diào)用函數(shù)時，它會清除前一次的定時器并設(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í)行一次后只有大于設(shè)定的執(zhí)行周期才會執(zhí)行第二次。(指連續(xù)觸發(fā)事件但是在 n 秒中只執(zhí)行一次函數(shù))
原理

用時間戳來判斷是否已到回調(diào)該執(zhí)行時間，記錄上次執(zhí)行的時間戳，然后每次觸發(fā) scroll 事件執(zhí)行回調(diào)，回調(diào)中判斷當(dāng)前時間戳距離上次執(zhí)行時間戳的間隔是否已經(jīng)到達(dá) 規(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);

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/109961.html

相關(guān)文章

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

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

    edagarli 評論0 收藏0

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

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

    andong777 評論0 收藏0

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

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

    LeexMuller 評論0 收藏0

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

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

    leoperfect 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<