优化网络请求性能——节流

节流：
就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。
好像水滴攒到一定重量才会落下一样

应用场景：
1.窗口调整
2.页面滚动
3.抢购点击

以抢购疯狂点击为例子，进行节流操作
如果不进行节流操作，就会可以有人通过脚本进行事件触发，在1s内触发几千次事件，然后像服务器发送数据请求，获取大量自己想要的商品，或者是恶意攻击。
所以我们要进行节流操作。在一定时间内，事件只触发一次，如果在这规定的时间内触发多次也不好使。只有在超过了规定的时间，才可以在触发一次

案例代码：

html代码：
	<span class="text">0</span>
	<button class="btn">点击</button>

没有节流处理的js代码：

	var oSpan = document.getElementsByClassName('text')[0];
	var oBtn = document.getElementsByClassName('btn')[0];

	oBtn.onclick = function() {
		oSpan.innerText = parseInt(oSpjsan.innerText) + 1;
	}

	

在控制台输入恶意脚本如下：
事件被触发多次， 浏览器任意崩溃，服务器端阻止不了
for(var i = 0; i < 999; i ++) {oBtn.click()}

节流处理后的js代码：

	var oSpan = document.getElementsByClassName('text')[0];
	var oBtn = document.getElementsByClassName('btn')[0];

	function throttle(fn, wait) {
		var lastTime = 0;
		return function() {
			var nowTime = new Date().getTime();
			if(nowTime - lastTime > wait) {
				fn.apply(this, arguments);
				lastTime = nowTime;
			}
		}
	}

	function buy(e) {
		console.log(this, e);
		oSpan.innerText = parseInt(oSpan.innerText) + 1;
	}

	oBtn.onclick = throttle(buy, 1000); 

	

// 在控制台输入恶意脚本如下：
// 事件只被触发一次
for(var i = 0; i < 999; i ++) {oBtn.click()}

节流代码封装：
关键点：日期对象

	function throttle(fn, wait) {
		var lastTime = 0;
		return function() {
			var nowTime = new Date().getTime();
			if(nowTime - lastTime > wait) {
				fn.apply(this, arguments);
				lastTime = nowTime;
			}
		}
	}

希望这篇节流处理的文章，可以帮助你优化你的页面，网络请求的性能。

如果你对防抖也不太了解，可以看我的另外一篇文章：
优化页面请求性能——防抖

文章如果有疏漏的地方，请指正，谢谢，我们一起进步。