JS中的防抖與節(jié)流及作用詳解

更新時間：2019年04月01日 14:02:53 作者：我在廣州寫bug

這篇文章主要介紹了JS中的防抖與節(jié)流及作用詳解，本文通過文字說明加示例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下

概念

函數(shù)防抖（debounce）是指在一定時間內(nèi)，在動作被連續(xù)頻繁觸發(fā)的情況下，動作只會被執(zhí)行一次，也就是說當(dāng)調(diào)用動作過n毫秒后，才會執(zhí)行該動作，若在這n毫秒內(nèi)又調(diào)用此動作則將重新計算執(zhí)行時間，所以短時間內(nèi)的連續(xù)動作永遠只會觸發(fā)一次，比如說用手指一直按住一個彈簧，它將不會彈起直到你松手為止。

函數(shù)節(jié)流是指一定時間內(nèi)執(zhí)行的操作只執(zhí)行一次，也就是說即預(yù)先設(shè)定一個執(zhí)行周期，當(dāng)調(diào)用動作的時刻大于等于執(zhí)行周期則執(zhí)行該動作，然后進入下一個新周期，一個比較形象的例子是如果將水龍頭擰緊直到水是以水滴的形式流出，那你會發(fā)現(xiàn)每隔一段時間，就會有一滴水流出。

函數(shù)節(jié)流（throttle）與函數(shù)防抖（debounce）都是為了限制函數(shù)的執(zhí)行頻次，以優(yōu)化函數(shù)觸發(fā)頻率過高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。

下面通過示例代碼看下防抖和節(jié)流。

什么是防抖？and什么是節(jié)流？一起來開心的學(xué)習(xí)下吧。

首先什么是防抖：就是在一定的時間內(nèi)事件只發(fā)生一次，比如你點擊button按鈕，1秒內(nèi)任你單身30年手速點擊無數(shù)次，他也還是只觸發(fā)一次。舉個例子，當(dāng)你在頁面中使用onkeyUp監(jiān)聽用戶在input框中的輸入，如果用戶按住一個6不放，那監(jiān)聽事件豈不是一直被觸發(fā)，這樣就浪費了一部分性能了，那么我們在一定事件內(nèi)監(jiān)聽，也就是說我過了一秒再來看看你輸入了多少個6，那這樣是不是輕松多了。ok，解釋清楚了那么就來看下代碼，更加清晰。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>防抖</title>
</head>
<body>
 <button id="debounce">防抖，防抖，防抖</button>
 <script>
 window.onload = function () {
  let obtn = document.getElementById('debounce'); //獲取按鈕
 obtn.addEventListener('click',debounceHandle(debounce),false); //監(jiān)聽綁定事件
 }

 //防抖函數(shù)
 function debounceHandle (fn) {
  let timer = null;
  return function () {
  clearTimeout(timer); //如果存在事件就清除定時器
  timer = setTimeout(function(){ //如果不存在那么就開啟定時器
   fn.call(this,arguments);
  },300)
  }
 }

 //執(zhí)行函數(shù)
 function debounce() {
  console.log('防抖，防抖，防抖');
 }
 </script>
</body>
</html>

上面函數(shù)也就是在300毫秒內(nèi)，只會觸發(fā)一次事件?？偨Y(jié)：防抖就是在任務(wù)頻繁觸發(fā)的情況下，只有任務(wù)觸發(fā)的間隔超過指定間隔的時候，任務(wù)才會執(zhí)行。

接下來什么是節(jié)流，假如在一個頁面中有任意多張圖片，那么就有可能會使用懶加載技術(shù)，懶加載呢就是監(jiān)聽滾動條的位置，那么如果用戶一直在滾動，那么事件監(jiān)聽就一直在觸發(fā)，也是浪費性能。那么節(jié)流就是在一定時間間隔內(nèi)觸發(fā)一次事件。話不多說，先看代碼。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>節(jié)流</title>
 <style>
 div {
  height: 5000px;
 }
 </style>
</head>
<body>
 <div>節(jié)流,節(jié)流,節(jié)流</div>
 <script>
 window.onload = function () {
  window.addEventListener('scroll',throttleHandle(throttle),false); //監(jiān)聽綁定事件
 }

 //節(jié)流函數(shù)
 function throttleHandle (fn) {
  let timer = null,
   booleanVal = true; // 聲明一個變量標(biāo)志做判斷
  return function () {
   if (!booleanVal) {
   return 
   } //如果事件正在執(zhí)行，那么就返回，將布爾值改為false
   booleanVal = false;
   //事件未執(zhí)行，創(chuàng)建事件
   timer = setTimeout(function() {
   fn.apply(this,arguments);
   booleanVal = true; //事件執(zhí)行完將布爾值改回
   },300)
  }
 }

 //執(zhí)行函數(shù)
 function throttle() {
  var scrollNum = document.documentElement.scrollTop || document.body.scrollTop;
  console.log(scrollNum);
 }
 </script>
</body>
</html>

這樣，在某些特定的工作場景，我們就可以使用防抖與節(jié)流來減少不必要的損耗。最后提一個問題，上句提到造成不必要的損耗，那么請問是什么損耗呢？

總結(jié)

以上所述是小編給大家介紹的JS中的防抖與節(jié)流及作用詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: