快捷導(dǎo)航

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

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

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

概念

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

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

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

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

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

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

<!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)聽(tīng)綁定事件
 }

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

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

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

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

<!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)聽(tīng)綁定事件
 }

 //節(jié)流函數(shù)
 function throttleHandle (fn) {
  let timer = null,
   booleanVal = true; // 聲明一個(gè)變量標(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>

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

總結(jié)

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

您可能感興趣的文章: