詳解JS中統(tǒng)計(jì)函數(shù)執(zhí)行次數(shù)與執(zhí)行時(shí)間

更新時(shí)間：2018年09月04日 08:32:10 作者：漁人碼頭

這篇文章給大家分享了JS中統(tǒng)計(jì)函數(shù)執(zhí)行次數(shù)與執(zhí)行時(shí)間的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友們分享下。

一、統(tǒng)計(jì)函數(shù)執(zhí)行次數(shù)

常規(guī)的方法可以使用 console.log 輸出來肉眼計(jì)算有多少個(gè)輸出

不過在Chrome中內(nèi)置了一個(gè) console.count 方法，可以統(tǒng)計(jì)一個(gè)字符串輸出的次數(shù)。我們可以利用這個(gè)來間接地統(tǒng)計(jì)函數(shù)的執(zhí)行次數(shù)

function someFunction() {
  console.count('some 已經(jīng)執(zhí)行');
}

function otherFunction() {
  console.count('other 已經(jīng)執(zhí)行');
}

someFunction(); // some 已經(jīng)執(zhí)行: 1
someFunction(); // some 已經(jīng)執(zhí)行: 2
otherFunction(); // other 已經(jīng)執(zhí)行: 1

console.count(); // default: 1
console.count(); // default: 2

不帶參數(shù)則為 default 值，否則將會(huì)輸出該字符串的執(zhí)行次數(shù)，觀測(cè)起來還是挺方便的

當(dāng)然，除了輸出次數(shù)之外，還想獲取一個(gè)純粹的次數(shù)值，可以用裝飾器將函數(shù)包裝一下，內(nèi)部使用對(duì)象存儲(chǔ)調(diào)用次數(shù)即可

var getFunCallTimes = (function() {
  
  // 裝飾器，在當(dāng)前函數(shù)執(zhí)行前先執(zhí)行另一個(gè)函數(shù)
  function decoratorBefore(fn, beforeFn) {
    return function() {
      var ret = beforeFn.apply(this, arguments);

      // 在前一個(gè)函數(shù)中判斷，不需要執(zhí)行當(dāng)前函數(shù)
      if (ret !== false) {
        fn.apply(this, arguments);
      }
    };
  }
  
  // 執(zhí)行次數(shù)
  var funTimes = {};
  
  // 給fun添加裝飾器，fun執(zhí)行前將進(jìn)行計(jì)數(shù)累加
  return function(fun, funName) {
    // 存儲(chǔ)的key值
    funName = funName || fun;
    
    // 不重復(fù)綁定，有則返回
    if (funTimes[funName]) {
      return funTimes[funName];
    }
    
    // 綁定
    funTimes[funName] = decoratorBefore(fun, function() {
      // 計(jì)數(shù)累加
      funTimes[funName].callTimes++;

      console.log('count', funTimes[funName].callTimes);
    });
    
    // 定義函數(shù)的值為計(jì)數(shù)值（初始化）
    funTimes[funName].callTimes = 0;

    return funTimes[funName];
  }
})();

function someFunction() {
  
}

function otherFunction() {
  
}


someFunction = getFunCallTimes(someFunction, 'someFunction');

someFunction(); // count 1
someFunction(); // count 2
someFunction(); // count 3
someFunction(); // count 4

console.log(someFunction.callTimes); // 4



otherFunction = getFunCallTimes(otherFunction);
otherFunction(); // count 1
console.log(otherFunction.callTimes); // 1

otherFunction(); // count 2
console.log(otherFunction.callTimes); // 2

二、統(tǒng)計(jì)函數(shù)執(zhí)行時(shí)間

Chrome中內(nèi)置了 console.time 和 console.timeEnd 來打點(diǎn)計(jì)算時(shí)間

console.time();

for (var i = 0; i < 100000; ++i) {

}

console.timeEnd(); // default: 1.77197265625ms

不傳入?yún)?shù)的話，將以default輸出毫秒值

我們可以封裝一下，傳入函數(shù)名稱，類似上面的做法，使用裝飾器在函數(shù)執(zhí)行前后進(jìn)行處理

var getFunExecTime = (function() {
  
  // 裝飾器，在當(dāng)前函數(shù)執(zhí)行前先執(zhí)行另一個(gè)函數(shù)
  function decoratorBefore(fn, beforeFn) {
    return function() {
      var ret = beforeFn.apply(this, arguments);

      // 在前一個(gè)函數(shù)中判斷，不需要執(zhí)行當(dāng)前函數(shù)
      if (ret !== false) {
        fn.apply(this, arguments);
      }
    };
  }

  // 裝飾器，在當(dāng)前函數(shù)執(zhí)行后執(zhí)行另一個(gè)函數(shù)
  function decoratorAfter(fn, afterFn) {
    return function() {
      fn.apply(this, arguments);
      afterFn.apply(this, arguments);
    };
  }
  
  // 執(zhí)行次數(shù)
  var funTimes = {};
  
  // 給fun添加裝飾器，fun執(zhí)行前后計(jì)時(shí)
  return function(fun, funName) {
    return decoratorAfter(decoratorBefore(fun, function() {
      // 執(zhí)行前
      console.time(funName);
    }), function() {
      // 執(zhí)行后
      console.timeEnd(funName);
    });
  }
})();

那么調(diào)用的時(shí)候，就不需要理會(huì)如何計(jì)時(shí)了

function someFunction() {
  for (var i = 0; i < 100000; ++i) {

  }
}


function otherFunction() {
  for (var i = 0; i < 10000000; ++i) {

  }
}

someFunction = getFunExecTime(someFunction, 'someFunction');
someFunction(); // someFunction: 1.616943359375ms

otherFunction = getFunExecTime(otherFunction, 'otherFunction');
otherFunction(); // otherFunction: 18.157958984375ms

Chrome的Console API畢竟不是標(biāo)準(zhǔn)的，除了使用它之外，還可以選擇日期插件 Date 中的 getTime now 相關(guān)方法

然而使用Date對(duì)象來計(jì)算耗時(shí)并不正統(tǒng)，推薦使用標(biāo)準(zhǔn)的 performance.now

var start = performance.now();

console.time();

for (var i = 0; i < 10000000; ++i) {

}

var end = performance.now();

console.timeEnd(); // default: 23.598876953125ms

console.log(end - start); // 23.600000015459955

可以看到，它們是相差不大的

使用類似的方法，將它包裝起來以便方便調(diào)用

var getFunExecTime = (function() {
  
  // 裝飾器，在當(dāng)前函數(shù)執(zhí)行前先執(zhí)行另一個(gè)函數(shù)
  function decoratorBefore(fn, beforeFn) {
    return function() {
      var ret = beforeFn.apply(this, arguments);

      // 在前一個(gè)函數(shù)中判斷，不需要執(zhí)行當(dāng)前函數(shù)
      if (ret !== false) {
        fn.apply(this, arguments);
      }
    };
  }

  // 裝飾器，在當(dāng)前函數(shù)執(zhí)行后執(zhí)行另一個(gè)函數(shù)
  function decoratorAfter(fn, afterFn) {
    return function() {
      fn.apply(this, arguments);
      afterFn.apply(this, arguments);
    };
  }
  
  // 執(zhí)行次數(shù)
  var funTimes = {};
  
  // 給fun添加裝飾器，fun執(zhí)行前后計(jì)時(shí)
  return function(fun, funName) {
    funName = funName || fun;

    if (funTimes[funName]) {
      return funTimes[funName];
    }
    
    // 綁定
    funTimes[funName] = decoratorAfter(decoratorBefore(fun, function() {
      // 執(zhí)行前
      funTimes[funName].timestampStart = performance.now();
    }), function() {
      // 執(zhí)行后
      funTimes[funName].timestampEnd = performance.now();
      
      // 將執(zhí)行耗時(shí)存入
      funTimes[funName].valueOf = function() {
        return this.timestampEnd - this.timestampStart;
      };
    });

    return funTimes[funName];
  }
})();

function someFunction() {
  for (var i = 0; i < 100000; ++i) {

  }
}


function otherFunction() {
  for (var i = 0; i < 10000000; ++i) {

  }
}

// 包裝
someFunction = getFunExecTime(someFunction);
// 執(zhí)行
someFunction();
// 獲取耗時(shí)，可直接使用函數(shù)的 valueOf
console.log(+someFunction); // 2.0999999847263098

otherFunction = getFunExecTime(otherFunction, 'otherFunction');
otherFunction(); 
console.log(+otherFunction); // 21.00000000745058

三、如何控制函數(shù)的調(diào)用次數(shù)

也可以通過閉包來控制函數(shù)的執(zhí)行次數(shù)

function someFunction() {
  console.log(1);
}

function otherFunction() {
  console.log(2);
}


function setFunCallMaxTimes(fun, times, nextFun) {
  return function() {
    if (times-- > 0) {
      // 執(zhí)行函數(shù)
      return fun.apply(this, arguments);
    } else if (nextFun && typeof nextFun === 'function') {
      // 執(zhí)行下一個(gè)函數(shù)
      return nextFun.apply(this, arguments);
    }
  };
}

var fun = setFunCallMaxTimes(someFunction, 3, otherFunction);

fun(); // 1
fun(); // 1
fun(); // 1
fun(); // 2
fun(); // 2

四、如何控制函數(shù)的執(zhí)行時(shí)間

因?yàn)镴S是單線程的，控制函數(shù)的執(zhí)行時(shí)間相對(duì)來說挺麻煩

通過 async await yield 等異步特性，也許還是能辦到的

在React 16中的 Fiber 機(jī)制，在某種意義上是能控制函數(shù)的執(zhí)行時(shí)機(jī)，得空再去看看它是怎么實(shí)現(xiàn)的吧

您可能感興趣的文章: