国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

20190726-前端筆記-防抖和節(jié)流

Thanatos / 1221人閱讀

摘要：定義定時器清空定時器重置定時器防抖流程觸發(fā)觸發(fā)定義一個定時器，返回執(zhí)行內(nèi)容為清除當(dāng)前定時器，定義執(zhí)行內(nèi)容。

防抖 
為了避免一些監(jiān)聽事件為在自己預(yù)料的情況，頻繁觸發(fā)。or 在某些監(jiān)聽命令會頻繁觸發(fā)事件比如resize、mousemove等等
未防抖 示例 
       var count = 0,
          Elem = doc.getElementById("con")

        function appendCount(e) {
            console.log(e);
            
          Elem.innerHTML = count++
        }

        // 正常，沒有防抖的情況下，直接監(jiān)聽執(zhí)行
        Elem.addEventListener("mousemove", function() {
          appendCount()
        })

這會導(dǎo)致，只要鼠標(biāo)移動，會導(dǎo)致Eelm.innerHTML不斷改變。現(xiàn)在看起來好像沒什么問題，如果是很多數(shù)據(jù)渲染或者請求幾千條列表數(shù)據(jù)呢？

會導(dǎo)致瀏覽器不斷回流和重繪。

那如何防抖呢？？

觸發(fā)mousemove時間后1s內(nèi)，只有不在觸發(fā)mousemove方法才會能執(zhí)行appendCount()。

var count = 0,
    Elem = doc.getElementById("con");
     
function debounce(fn, waitTime){
    // 定義定時器
     var timeoutFn = null;
     
     return function (){
          // 清空定時器
          clearTimeout(timeoutFn);
          // 重置定時器
          timeoutFn = (() => {
              fn.apply(this, arguments)
          },waitTime)
     }
}

function appendCount(){
    ELem.innerHTML=count++;
}

Elem.addEventListener("mousemove", debounce(appendCount, 500))
防抖流程

mousemove觸發(fā),觸發(fā)debounce()`

定義一個定時器timeoutFn，返回執(zhí)行內(nèi)容為：清除當(dāng)前timeoutFn定時器( timeoutFn = null;)，定義執(zhí)行內(nèi)容。

// debounce() 返回內(nèi)容
function (){
      // 清空定時器
      clearTimeout(timeoutFn);
      // 重置定時器
      timeoutFn = (() => {
          fn.apply(this, arguments)
      },waitTime)
 }

當(dāng)mousemove再觸發(fā)，timeoutFn定時器再次清空，重新定義執(zhí)行內(nèi)容

只有等到最后一次mousemove，定時器沒有被debounce()清除timeoutFn定時器，最后執(zhí)行 fn.apply(this, agruments);

節(jié)流 
相對比防抖，我是這樣理解節(jié)流的:當(dāng)我們想觸發(fā)在一段時間范圍有且只觸發(fā)一次這樣的事件，這樣我們可以更節(jié)約我們的資源和網(wǎng)絡(luò)請求。

就當(dāng)上面的AppendCount()舉例，我只想在3s內(nèi)之能觸發(fā)一次事件AppendCount()。

那么應(yīng)該怎么處理呢？

var count = 0,
    Elem = doc.getElementById("con");

function throttle(fn,waitTime){
    var timeoutFn = null;
     
    return function () {
        // 如果存在timeoutFn定時器，則等待timeoutFn執(zhí)行完成
        if(!timeoutFn){
            timeoutFn = (() => {
                // 置空定時器
                clearTimeout(timeoutFn)
                fn.apply(this, arguments)
            },waitTime)
        }     
    }
}

function appendCount(){
    ELem.innerHTML=count++;
}

Elem.addEventListener("mousemove", throttle(appendCount, 3000))

這和防抖不同的是，是等待timeoutFn執(zhí)行完成后，通過clearTimeout(timeoutFn)置空，那么在3s后才能再次執(zhí)行timeoutFn

還有一個寫法，和上面有一點(diǎn)不同，上面的是當(dāng)在第1s觸發(fā)throttle，但是要在第4s才能執(zhí)行appendCount。但是下面是立即執(zhí)行，當(dāng)?shù)?s觸發(fā)throttle,就執(zhí)行appendCount,然后在第4s后可以再次會發(fā)throttle

var count = 0,
    Elem = doc.getElementById("con");

function throttle(fn, waitTime){
    // 定義定時器、執(zhí)行狀態(tài)
    var timeoutFn = null,
        isRuning = false;
     
    return function () {
        // 如果不在執(zhí)行狀態(tài)
       if(!isRuning){
           // 開啟執(zhí)行狀態(tài)
           isRuning = true;
           // 定義定時器
           timeoutFn =(() => {
              fn.apply(this, arguments);
              // 執(zhí)行完成，關(guān)閉執(zhí)行狀態(tài)
              isRuning = false;
           },waitTime)
       }
    }
}

function appendCount(){
    ELem.innerHTML=count++;
}

Elem.addEventListener("mousemove", throttle(appendCount, 3000))
參考

JavaScript專題之跟著underscore學(xué)節(jié)流

JavaScript專題之跟著underscore學(xué)防抖

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

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

相關(guān)文章

  • 20190726-前端筆記-防抖和節(jié)流

    摘要：定義定時器清空定時器重置定時器防抖流程觸發(fā)觸發(fā)定義一個定時器，返回執(zhí)行內(nèi)容為清除當(dāng)前定時器，定義執(zhí)行內(nèi)容。 防抖 為了避免一些監(jiān)聽事件為在自己預(yù)料的情況，頻繁觸發(fā)。or 在某些監(jiān)聽命令會頻繁觸發(fā)事件比如resize、mousemove等等 未防抖 示例 var count = 0, Elem = doc.getElementById(con) ...

    JasinYip 評論0 收藏0

  • 徹底弄懂函數(shù)防抖和函數(shù)節(jié)流

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

    Mr_houzi 評論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

發(fā)表評論

0條評論

Thanatos

男|高級講師

TA的文章

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