快捷導(dǎo)航

JavaScript函數(shù)節(jié)流的兩種寫法

更新時間：2017年04月07日 08:55:08 作者：fantasy525

本文主要介紹了JavaScript函數(shù)節(jié)流的兩種寫法。具有很好的參考價值。下面跟著小編一起來看下吧

最近看了函數(shù)節(jié)流的相關(guān)內(nèi)容，具體什么是節(jié)流我不討論了，網(wǎng)上很多，這里總結(jié)下兩個方法，我只認可其中一個。另一個貌似也能達到節(jié)流的效果但是感覺不是很正規(guī)。

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>函數(shù)節(jié)流</title>
 <style>
 div{
  font-size:40px;
  color:red;
  text-align: center;
 }
 </style>
</head>
<body>
<div>0</div>
 <script>
var a=0;
 var oDiv=document.getElementsByTagName('div')[0];
 var throttle=function(fn,wait){
 var startTime=new Date();
 return function(){
  var arg=arguments;
  var context=this;
  var curTime=new Date();
  // 如果達到了規(guī)定的觸發(fā)時間間隔，觸發(fā) handler
  var remaing=wait-(curTime-startTime)
  if(remaing<=0||remaing>wait){//按理說remaing足夠證明已經(jīng)到了時間間隔，但是為了防止客戶端修改了時間所以加個條件(為什么這么加我也不懂)
  fn.apply(context,arg);
  startTime=curTime;
  }
 };
 };
 window.onmousemove=throttle(function(){
  a++;
  oDiv.innerText=a+"";
 },2000);
 </script>
</body>
</html>

我比較認可這個方法，另外這是簡潔版，還有一種可以是這樣子的

function throttle(fun, delay, time) {
  var timeout,
    startTime = new Date();
  return function() {
    var context = this,
      args = arguments,
      curTime = new Date();
    clearTimeout(timeout);
    // 如果達到了規(guī)定的觸發(fā)時間間隔，觸發(fā) handler
    if (curTime - startTime >= time) {
      fun.apply(context, args);
      startTime = curTime;
      // 沒達到觸發(fā)間隔，重新設(shè)定定時器
    } else {
      timeout = setTimeout(function(){
       fun.apply(context, args);
      }, delay);
    }
  };
};

就是在判斷完時間間隔后再加個計時器來延遲，這個我覺得加不加都行，加了也沒錯跟時間判斷互補，不加也能實現(xiàn)節(jié)流的效果。

第二類寫法：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>函數(shù)節(jié)流</title>
 <style>
 div{
  font-size:40px;
  color:red;
  text-align: center;
 }
 </style>
</head>
<body>
<div>0</div>
 <script>
 var a=0;
 var oDiv=document.getElementsByTagName('div')[0];
 var throttle=function(fn,time){
  var timer=null;
  return function(){
  var arg=arguments;
  var context=this;
  if(timer){
   return false;
  }
  else{
  timer=setTimeout(function(){
   clearTimeout(timer);
   timer=null;
   fn.apply(context,arg);
  },time);
  }
 };
 };
 window.onmousemove=throttle(function(){
   a++;
 oDiv.innerText=a+"";
  },2000);
 </script>
</body>
</html>

這種寫法通過判斷是否存在正在進行的計時器來決定是否執(zhí)行函數(shù)，存在就結(jié)束運行函數(shù)，但是那個計時器仍在隊列里進行實踐一到還會執(zhí)行，通過運行也能達到節(jié)流，也就是間隔固定的時間觸發(fā)函數(shù)，但是我就是不太喜歡這種寫法。可能是這種方法沒第一種直接吧。

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: