JS防抖與節(jié)流的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)JS防抖與節(jié)流的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

一、速識(shí)防抖：

在這之前，比如我們先定義一個(gè)按鈕，并綁定一個(gè)點(diǎn)擊事件，執(zhí)行要觸發(fā)的事件：

<!-- 定義一個(gè)按鈕 -->
<input type="button" id="btn" value="按鈕" />
 
<script>
// 獲取標(biāo)簽
  var btn = document.getElementById("btn");
// 綁定事件  
  btn.addEventListener("click", real);
// 要觸發(fā)的事件
  function real(e) {
    console.log("北極光之夜。");
    console.log(e);
  }
</script>

可以發(fā)現(xiàn)，一直點(diǎn)擊會(huì)一直觸發(fā)事件，如果這個(gè)事件為發(fā)送一個(gè)請(qǐng)求，那么這對(duì)與服務(wù)器來說是很不友好的。同樣的請(qǐng)求因?yàn)橛脩舻亩啻吸c(diǎn)擊而多次發(fā)送請(qǐng)求，返回的結(jié)果和只點(diǎn)擊一次是一樣的，大大加重服務(wù)器壓力和影響性能。所以，我們引入防抖的概念，簡單來說，防抖就是通過setTimeout 的方式，在一定的時(shí)間間隔內(nèi)，將多次觸發(fā)變成一次觸發(fā)。

二、速識(shí)節(jié)流：

節(jié)流其實(shí)就很好理解了，減少一段時(shí)間的觸發(fā)頻率。簡單來說，就是你一直狂點(diǎn)不停的話，它會(huì)每隔一定時(shí)間就執(zhí)行一次。它與防抖最大的區(qū)別就是，無論事件觸發(fā)多么頻繁，都可以保證在規(guī)定時(shí)間內(nèi)可以執(zhí)行一次執(zhí)行函數(shù)。下面利用計(jì)算時(shí)間戳實(shí)現(xiàn)：

   <input type="button" id="btn" value="按鈕" />
    <script>
      var btn = document.getElementById("btn");
      // 點(diǎn)擊后觸發(fā)trigger()函數(shù)，第一個(gè)參數(shù)為真實(shí)要執(zhí)行的函數(shù)，第二個(gè)參數(shù)為限制時(shí)間
      btn.addEventListener("click", trigger(real, 500));
     function trigger(fn, delay) {
       // 設(shè)置bef，為上一次執(zhí)行時(shí)間，初始為0
        var bef = 0;
        return function () {
        // 獲取當(dāng)前時(shí)間戳
          var now = new Date().getTime();
          //如果當(dāng)前時(shí)間減去上次時(shí)間大于限制時(shí)間時(shí)才執(zhí)行
          if (now - bef > delay) {
           // 執(zhí)行函數(shù)
            fn(...arguments);
            //執(zhí)行后，上次時(shí)間賦值為這次執(zhí)行時(shí)間
            bef = now;
          }
        };
      }
      //真實(shí)要執(zhí)行函數(shù)
      function real(e) {
        console.log("北極光之夜。");
        console.log(e);
      }
 
   </script>

關(guān)于“JS防抖與節(jié)流的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。