javascript函式節流程式碼例項分享

antzone發表於2017-04-13
JavaScript函式

先通過一個操作來說明函式節流的重要性。

resize事件可能大家都不陌生，具體可以參閱javascript resize事件一章節。

當調整視窗大小的時候，要不斷的執行事件處理函式，這是非常耗費效能的，那麼我們可以通過一定的方式，在不影響效果的情況下，來儘可能的減少執行的次數。下面是一個能夠實現此功能的程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
var throttle = function (fn, interval) {
  var timer, firstTime = true;
  return function() {
    var args = arguments, _this = this;
    if( firstTime ) { 
      fn.apply( _this, args );
      return firstTime = false;
    }
    if (timer) { 
      return false;
    }
    timer = setTimeout(function(){
      clearTimeout(timer);
      timer = null;
      fn.apply(_this, args)
    }, interval || 500)
  }
}
window.onload = function () {
  var count = 0;
  var odiv = document.getElementById("antzone");
  window.onresize = throttle(function () {
    count = count + 1;
    odiv.innerHTML = count;
  }, 1000)
}
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

當然我們無法真正的控制事件處理函式的執行頻率，但是我們可以控制事件處理函式中實際內容的執行頻次。

相關文章