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

資訊專欄INFORMATION COLUMN

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

JasinYip / 654人閱讀

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

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

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

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

這會(huì)導(dǎo)致，只要鼠標(biāo)移動(dòng)，會(huì)導(dǎo)致Eelm.innerHTML不斷改變?，F(xiàn)在看起來(lái)好像沒(méi)什么問(wèn)題，如果是很多數(shù)據(jù)渲染或者請(qǐng)求幾千條列表數(shù)據(jù)呢？

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

那如何防抖呢？？

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

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

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

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

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

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

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

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

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

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

就當(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定時(shí)器，則等待timeoutFn執(zhí)行完成
        if(!timeoutFn){
            timeoutFn = (() => {
                // 置空定時(shí)器
                clearTimeout(timeoutFn)
                fn.apply(this, arguments)
            },waitTime)
        }     
    }
}

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

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

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

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

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

function throttle(fn, waitTime){
    // 定義定時(shí)器、執(zhí)行狀態(tài)
    var timeoutFn = null,
        isRuning = false;
     
    return function () {
        // 如果不在執(zhí)行狀態(tài)
       if(!isRuning){
           // 開啟執(zhí)行狀態(tài)
           isRuning = true;
           // 定義定時(shí)器
           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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

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

    Thanatos 評(píng)論0 收藏0

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

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

    Mr_houzi 評(píng)論0 收藏0

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

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

    andong777 評(píng)論0 收藏0

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

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

    LeexMuller 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<