你不知道的秘密之函数节流

函数节流

• 接着上一篇的函数防抖，再仔细看一下看不懂的函数防抖的定义

  • 当函数在很小的一个时间段内被频繁触发的时候 , 只有当时间累积到一定程度，该函数才会执行一次

• 其实函数节流就像日常生活中一个没拧紧的一滴一滴地滴水的水龙头

• 我们先用代码模拟一下一旦敲一下水龙头就立刻滴下一滴水的情景

  // 取一个水桶
  var oShuiTong = document.getElementById('shuitong');
	// 滴水函数
	function diShui() {
	  // 水桶中增加一滴水
	  oShuiTong.innerText = parseInt(oShuiTong.innerText) + 1;
	}
	// 一个神奇的水龙头
  var oLongTou = document.getElementById('longtou');
	// 敲一下水龙头就滴下一滴水
	oLongTou.onclick = diShui

• 众所周知生活中处处皆有熊孩子，如果让他们发现这么神奇的水龙头，恰好该熊孩子又天赋异禀，一瞬间可以敲击1000下水龙头！模拟代码如下

	for (var i = 0; i < 1000; i ++) {
	  oLongTou.click();
	}

• 水桶中瞬间多了一瓢水。。这也太可怕了

• 所以我们回归现实，水龙头上只有累积一定的水量，才会滴下一滴水，这种每隔一定的时间才会执行一次的操作可以抽象出来封装为函数，更具通用性

	function throttle(fn, waitTime) {
	  var lastTime = 0;
	  return function () {
	    // 获取当前时间
	    var nowTime = new Date().getTime();
	    if (nowTime - lastTime > waitTime) {
	      fn();
	      lastTime = nowTime;
	    }
	  }
	}

• 水龙头一秒钟滴下一滴水

	oLongTou.onclick = throttle(diShui, 1000);

• 函数节流应用场景

  • 窗口调整 ( resize )

  • 页面滚动 (scroll )

  • 抢购疯狂点击 ( mousedown )