這篇文章主要講解了“JS怎么防抖和節(jié)流”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JS怎么防抖和節(jié)流”吧！

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比曾都網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式曾都網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋曾都地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。

函數(shù)防抖

當持續(xù)觸發(fā)事件時，一定時間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會執(zhí)行一次，如果設定時間到來之前，又觸發(fā)了事件，就重新開始延時。也就是說當一個用戶一直觸發(fā)這個函數(shù)，且每次觸發(fā)函數(shù)的間隔小于既定時間，那么防抖的情況下只會執(zhí)行一次。

function debounce(fn, wait) {
  var timeout = null;   //定義一個定時器
  return function() {
    if(timeout !== null) 
        clearTimeout(timeout); //清除這個定時器
    timeout = setTimeout(fn, wait); 
  }
}
// 處理函數(shù)
function handle() {
  console.log(Math.random()); 
}
// 滾動事件
window.addEventListener('scroll', debounce(handle, 1000));

如上所見，當持續(xù)觸發(fā)scroll函數(shù)，handle函數(shù)只會在1秒時間內(nèi)執(zhí)行一次，在滾動過程中并沒有持續(xù)執(zhí)行，有效減少了性能的損耗

函數(shù)節(jié)流

當持續(xù)觸發(fā)事件時，保證在一定時間內(nèi)只調(diào)用一次事件處理函數(shù)，意思就是說，假設一個用戶一直觸發(fā)這個函數(shù)，且每次觸發(fā)小于既定值，函數(shù)節(jié)流會每隔這個時間調(diào)用一次

用一句話總結防抖和節(jié)流的區(qū)別：防抖是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行，節(jié)流是將多次執(zhí)行變?yōu)槊扛粢欢螘r間執(zhí)行
實現(xiàn)函數(shù)節(jié)流我們主要有兩種方法：時間戳和定時器

例如

var throttle = function(func, delay) {
  var prev = Date.now();
  return function() {
    var context = this;  //this指向window
    var args = arguments;
    var now = Date.now();
    if (now - prev >= delay) {
      func.apply(context, args);
      prev = Date.now();
    }
  }
}
function handle() {
  console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

這個節(jié)流函數(shù)利用時間戳讓第一次滾動事件執(zhí)行一次回調(diào)函數(shù)，此后每隔1000ms執(zhí)行一次，在小于1000ms這段時間內(nèi)的滾動是不執(zhí)行的
再舉一個定時器的例子：

var throttle = function(func, delay) {
  var timer = null;
  return function() {
    var context = this;
    var args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}
function handle() {
  console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

當觸發(fā)事件的時候，我們設置了一個定時器，在沒到1000ms之前這個定時器為null，而到了規(guī)定時間執(zhí)行這個函數(shù)并再次把定時器清除。也就是說當?shù)谝淮斡|發(fā)事件，到達規(guī)定時間再執(zhí)行這個函數(shù)，執(zhí)行之后馬上清除定時器，開始新的循環(huán)，那么我們看到的效果就是，滾動之后沒有馬上打印，而是等待1000ms打印，有一個延遲的效果，并且這段時間滾動事件不會執(zhí)行函數(shù)。
單用時間戳或者定時器都有缺陷，我們更希望第一次觸發(fā)馬上執(zhí)行函數(shù)，最后一次觸發(fā)也可以執(zhí)行一次事件處理函數(shù)

var throttle = function(func, delay) {
   var timer = null;
   var startTime = Date.now(); //設置開始時間
   return function() {
       var curTime = Date.now();
       var remaining = delay - (curTime - startTime); //剩余時間
       var context = this;
       var args = arguments;
       clearTimeout(timer);
       if (remaining <= 0) {   // 第一次觸發(fā)立即執(zhí)行
          func.apply(context, args);
          startTime = Date.now();
       } else {
          timer = setTimeout(func, remaining);  //取消當前計數(shù)器并計算新的remaining
       }
   }
}
function handle() {
   console.log(Math.random());
}
 window.addEventListener('scroll', throttle(handle, 1000));

在節(jié)流函數(shù)內(nèi)部使用開始時間startTime、當前時間curTime和剩余時間remaining，當剩余時間小于等于0意味著執(zhí)行處理函數(shù)，這樣保證第一次就能立即執(zhí)行函數(shù)并且每隔delay時間執(zhí)行一次；如果還沒到時間，就會在remaining之后觸發(fā)，保證最后一次觸發(fā)事件也能執(zhí)行函數(shù)，如果在remaining時間內(nèi)又觸發(fā)了滾動事件，那么會取消當前的計數(shù)器并計算出新的remaing時間。通過時間戳和定時器的方法，我們實現(xiàn)了第一次立即執(zhí)行，最后一次也執(zhí)行，規(guī)定時間間隔執(zhí)行的效果，可以靈活運用在開發(fā)中

PS：防抖和節(jié)流能有效減少瀏覽器引擎的損耗，防止出現(xiàn)頁面堵塞卡頓現(xiàn)象，應該熟練掌握。最后再次感謝原作者的總結，熱心分享技術讓我們的生活變得更好

感謝各位的閱讀，以上就是“JS怎么防抖和節(jié)流”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對JS怎么防抖和節(jié)流這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

網(wǎng)站欄目：JS怎么防抖和節(jié)流-創(chuàng)新互聯(lián)
新聞來源：http://weahome.cn/article/psece.html