js---節(jié)流

olle 發(fā)布于2019-08-21 17:49 / 1848人閱讀

摘要：節(jié)流的實現(xiàn)方式有兩種主流的實現(xiàn)方式，一種是時間戳，一種是設(shè)置定時器。使用定時器有個問題就是點擊不會立即執(zhí)行，需要延遲設(shè)定的時間才會執(zhí)行。

前言

在活動需求中，因為做的狂點小游戲。在實際體驗中就會出現(xiàn)，頻繁的點擊造成動畫的不連貫，影響用戶體驗。并且再播放音效的時候，如果沒點擊一次就觸發(fā)一次音效會造成將聲音壓入到棧中，會持續(xù)的播放。因此在這里的操作做了節(jié)流的限制，隔多少秒觸發(fā)一次。總結(jié)一下節(jié)流的實現(xiàn)方法。

節(jié)流

節(jié)流的原理很簡單：如果你持續(xù)觸發(fā)事件，每隔一段時間，只執(zhí)行一次事件。
根據(jù)首次是否執(zhí)行以及結(jié)束后是否執(zhí)行，效果有所不同，實現(xiàn)的方式也有所不同。
節(jié)流的實現(xiàn)方式有兩種主流的實現(xiàn)方式，一種是時間戳，一種是設(shè)置定時器。

使用時間戳

本次活動利用的就是該實現(xiàn)方式。
使用時間戳，當(dāng)觸發(fā)事件的時候，我們?nèi)〕霎?dāng)前的時間戳，然后減去之前的時間戳（最一開始值設(shè)為0），如果大于設(shè)置的時間周期，就執(zhí)行函數(shù)，然后更新時間戳為當(dāng)前的時間戳，如果小于就不執(zhí)行。
具體代碼如下：

function throttle(fun, wait) {
       var context,args;
       var previous = 0;
       return function () {
           var now = +new Date();//格式化時間
           context = this;
           args = arguments;
           if(now - previous > wait){
               fun.apply(context,args);
               previous = now;
           }
       }
   }

這樣寫法適用于，將要執(zhí)行的函數(shù)直接賦值給事件。btn.addEventListener("click",throttle(addSelf,2000),false);因為throttle返回的是一個函數(shù)，直接賦值給事件可以觸發(fā)執(zhí)行。

如果在事件的回調(diào)中執(zhí)行，就要具體修改一下。

var previous = 0;
function throttle(fun, wait) {
       var context,args;
       return function () {
           var now = +new Date();//格式化時間
           context = this;
           args = arguments;
           if(now - previous > wait){
               fun.apply(context,args);
               previous = now;
           }
       }
   }

將previous提升到外面，寫法就改為btn.addEventListener("click",function () {

    throttle(addSelf,2000)();
},false);
這時throttle函數(shù)在后面要加小括號直接執(zhí)行。

使用定時器

當(dāng)觸發(fā)事件的時候，我們設(shè)置一個定時器，再觸發(fā)事件的時候，如果定時器存在，就不執(zhí)行，直到定時器執(zhí)行，然后執(zhí)行函數(shù)，清空定時器，這樣就可以設(shè)置下個定時器。

    function throttle(fun, wait) {
      var timeout context,args;
      return function () {
          context = this;
          args = arguments;
          if(!timeout){
              timeout = setTimeout(function () {
                timeout = null;
                fun.apply(context,args)
              },wait)
          }
      }
  }

同理如果用在回調(diào)函數(shù)中，需要將timeout提到函數(shù)外面。
使用定時器有個問題就是點擊不會立即執(zhí)行，需要延遲設(shè)定的時間才會執(zhí)行。

比較

1.第一種事件會立即執(zhí)行，第二種事件會在n秒后第一次執(zhí)行

2.第一種事件停止觸發(fā)后沒有辦法再執(zhí)行事件，第二種事件停止觸發(fā)后依然會再執(zhí)行一次事件

結(jié)合這兩種方法，并且可以配置是否要第一次立即執(zhí)行或者停止觸發(fā)后再執(zhí)行一次。

直接上代碼

配置第三個參數(shù)leading：false表明不需要第一次立即執(zhí)行。trailing:false表明停止觸發(fā)后不再執(zhí)行最后一次。

    var previous = 0;
    var timeout;
    function throttle(fun, wait, options) {
     var context,args;
     /*var previous = 0;*/
     if(!options) options = {};

     var later = function () {
         previous = options.leading === false ? 0 :new Date().getTime();
         timeout = null;
         fun.apply(context,args);
         if(!timeout) context = args = null;
     };

     var throttled = function () {
         var now = new Date().getTime();
         if(!previous && options.leading === false) previous = now;
         var remaining = wait - (now - previous);
         context = this;
         args = arguments;
         if(remaining <= 0 || remaining > wait) {
             if(timeout){
                 clearTimeout(timeout);
                 timeout = null;
             }
             previous = now;
             fun.apply(context,args);
             if(!timeout) context = args = null;
         } else if(!timeout && options.trailing !==false){
            timeout = setTimeout(later,remaining)
         }
     };
     return throttled;
 }
 //使用 
 btn.addEventListener("click",function () {
        throttle(addSelf,2000,{trailing:false})();
    },false);

默認(rèn)情況下都是兼顧了第一次點擊立即觸發(fā)和最后觸發(fā)后執(zhí)行一次。

注意

leading：false和trailing:false不能同時設(shè)置。

如果同時設(shè)置的話，比如當(dāng)你在不再點擊的時候，因為trailing設(shè)為了false，停止觸發(fā)不會設(shè)置定時器，所以只要再過了設(shè)置的時間，在點擊的話，就會立即執(zhí)行，就違反了leading:false了。所以該方法只有三種情況可用。

GPU云服務(wù)器云服務(wù)器 js函數(shù)節(jié)流函數(shù)節(jié)流節(jié)流保存字節(jié)流

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

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

發(fā)表評論

登陸后可評論

0條評論

olle

男|高級講師

我要關(guān)注我要私信

TA的文章

【物聯(lián)網(wǎng)】33.物聯(lián)網(wǎng)開發(fā) - 機器人

閱讀 3428·2021-11-19 09:40
Hostigger：土耳其vps/荷蘭vps/美國vps，首月9折，1核/1G/30G SSD/2T

閱讀 1313·2021-10-11 11:07
主機名和ip地址分別指什么-如何查看主機名和IP地址？

閱讀 4844·2021-09-22 15:07
九乘九口訣表和乘法口訣表

閱讀 2890·2021-09-02 15:15
gulp--sass

閱讀 1964·2019-08-30 15:55
CSS 火焰？不在話下

閱讀 539·2019-08-30 15:43
SEER主網(wǎng)網(wǎng)頁錢包API節(jié)點列表更新加入以獲得更快的連接速度

閱讀 883·2019-08-30 11:13
從零開始寫一個輪播

閱讀 1449·2019-08-29 15:36

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

js---節(jié)流

相關(guān)文章

**JS進(jìn)階篇--JS函數(shù)節(jié)流（throttle）**

談?wù)?em>js中的函數(shù)節(jié)流

**JS進(jìn)階篇3---函數(shù)“節(jié)流” VS “防抖”**

**js 防抖節(jié)流 JavaScript**

詳談js防抖和節(jié)流

**JS進(jìn)階篇1---函數(shù)節(jié)流（throttle）**

發(fā)表評論

0條評論

olle

男|高級講師

TA的文章

【物聯(lián)網(wǎng)】33.物聯(lián)網(wǎng)開發(fā) - 機器人

Hostigger：土耳其vps/荷蘭vps/美國vps，首月9折，1核/1G/30G SSD/2T

主機名和ip地址分別指什么-如何查看主機名和IP地址？

九乘九口訣表和乘法口訣表

gulp--sass

CSS 火焰？不在話下

SEER主網(wǎng)網(wǎng)頁錢包API節(jié)點列表更新加入以獲得更快的連接速度

從零開始寫一個輪播

最新活動