关于JS定时器的一些总结

工作中最近做了有关js发送ajax请求拉取数据定时刷新界面数据的功能，由按钮触发抓取请求，示例如下：

function loadQpsTableForCobarNode() {
				// initial 'last' Array;
		var last = new Array();
		var o = new Object();
		o.id = -1;
		o.netIn = -1;
		o.netOut = -1;
		o.timestamp = -1;
		o.reCount = -1;
		last.push(o);
		function loadQpsTableForCobarNode() {
		var clusterId = document.getElementById('clusterId').value;
		var nodeId = document.getElementById('cobarNodeId').value;
		var appName = "GLOBAL";
		getJsonFromServer(
			"qpsStatus.ajax?" + encodeFormData({
					"cobarId":nodeId,
					"last" : toMyJSONString(last),
					"valueType":"currentQpsStatus"
			}),
			function(returnedJson) {
					while (last.length != 0) {
						last.shift();
					}
					//得到表格对应的id
					var targetTable = document.getElementById("qpsTable");
					//删除原有的行
					while (targetTable.rows.length > 1) {
						targetTable.deleteRow(1);
					}
					//插入数据	，其实我这里只是有一行数据的			
					if (returnedJson[0] != null) {
					var rowIndex = 1;
					for ( var i = 0; i < returnedJson.length; ++i) {
						
						var newRow = targetTable.insertRow(rowIndex++);
						newRow.setAttribute( 'style', 'background-color: rgb(245, 245, 245);' );	
						newRow.insertCell(0).innerHTML = (returnedJson[i]["request"]/100000).toFixed(0)+"*10^5";
						newRow.insertCell(1).innerHTML = returnedJson[i]["request_deriv"];
						newRow.insertCell(2).innerHTML = (returnedJson[i]["netIn"]/1024/1024/1024).toFixed(2)+"GB";
						newRow.insertCell(3).innerHTML = returnedJson[i]["netIn_deriv"];
						newRow.insertCell(4).innerHTML = (returnedJson[i]["netOut"]/1024/1024/1024).toFixed(2)+"GB";
						newRow.insertCell(5).innerHTML = returnedJson[i]["netOut_deriv"];
					    }
				     }


					var l = new Object();
					l.id = returnedJson[0]["id"];
					l.netIn = returnedJson[0]["netIn"];
					l.netOut = returnedJson[0]["netOut"];
					l.timestamp = returnedJson[0]["timestamp"];
					l.reCount = returnedJson[0]["request"];


					last.push(l);
					timer = setTimeout(loadQpsTableForCobarNode, grabInterval);
			});			
	}
	setTimeout(loadQpsTableForCobarNode, grabInterval/1000);
}

上面代码中，如果多次频繁点击按钮，就会出现界面频繁刷新（不按照我们安排的时间间隔）

需要在又一次触发方法的时候解除上一次额定时器才行。

var timer;
//这里的QPS数据刷新方式和threadpool是不一样的,我需要在js这里保存上一次的数据返回给Ajax进行处理
//threadpool只需要每次拉取就可以了，所以这个方法里面还套了一个方法，只是每次定时调用那个方法
//因为last每次只是初始化一次，表示是第一抓取，不用再Ajax当中进行减法处理
function loadQpsTableForCobarNode() {
				// initial 'last' Array;
		var last = new Array();
		var o = new Object();
		o.id = -1;
		o.netIn = -1;
		o.netOut = -1;
		o.timestamp = -1;
		o.reCount = -1;
		last.push(o);
		function loadQpsTableForCobarNode() {
		var clusterId = document.getElementById('clusterId').value;
		var nodeId = document.getElementById('cobarNodeId').value;
		var appName = "GLOBAL";
		getJsonFromServer(
			"qpsStatus.ajax?" + encodeFormData({
					"cobarId":nodeId,
					"last" : toMyJSONString(last),
					"valueType":"currentQpsStatus"
			}),
			function(returnedJson) {
					while (last.length != 0) {
						last.shift();
					}
					//得到表格对应的id
					var targetTable = document.getElementById("qpsTable");
					//删除原有的行
					while (targetTable.rows.length > 1) {
						targetTable.deleteRow(1);
					}
					//插入数据	，其实我这里只是有一行数据的			
					if (returnedJson[0] != null) {
					var rowIndex = 1;
					for ( var i = 0; i < returnedJson.length; ++i) {
						
						var newRow = targetTable.insertRow(rowIndex++);
						newRow.setAttribute( 'style', 'background-color: rgb(245, 245, 245);' );	
						newRow.insertCell(0).innerHTML = (returnedJson[i]["request"]/100000).toFixed(0)+"*10^5";
						newRow.insertCell(1).innerHTML = returnedJson[i]["request_deriv"];
						newRow.insertCell(2).innerHTML = (returnedJson[i]["netIn"]/1024/1024/1024).toFixed(2)+"GB";
						newRow.insertCell(3).innerHTML = returnedJson[i]["netIn_deriv"];
						newRow.insertCell(4).innerHTML = (returnedJson[i]["netOut"]/1024/1024/1024).toFixed(2)+"GB";
						newRow.insertCell(5).innerHTML = returnedJson[i]["netOut_deriv"];
					    }
				     }

					var l = new Object();
					l.id = returnedJson[0]["id"];
					l.netIn = returnedJson[0]["netIn"];
					l.netOut = returnedJson[0]["netOut"];
					l.timestamp = returnedJson[0]["timestamp"];
					l.reCount = returnedJson[0]["request"];

					last.push(l);
					if(timer != null){
						clearTimeout(timer);
					}
					timer = setTimeout(loadQpsTableForCobarNode, grabInterval);
			});			
	}
	setTimeout(loadQpsTableForCobarNode, grabInterval/1000);
}

这样就可以了