Javascript 代理模式模拟一个文件同步功能

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<input type="checkbox" id="1">

	<input type="checkbox" id="2">

	<input type="checkbox" id="3">

	<input type="checkbox" id="4">

	<input type="checkbox" id="5">

	<input type="checkbox" id="6">

	<input type="checkbox" id="7">

	<input type="checkbox" id="8">

	<input type="checkbox" id="9">

	<input type="checkbox" id="10">

	<p id="status"></p>

<script>

	var checkbox = document.getElementsByTagName('input');

	//本体类，同步逻辑处理

	var syncFile = function(id){

		//Ajax等同步代码...

		document.getElementById('status').innerHTML = '正在同步文件'+id;

	}

	//代理类，通过一个闭包结构保存cache和timer

	var syncFileProxy = (function(){

		var cache = [];

		var timer = null;

		return function(id){

			cache.push(id);

			//小于2秒的同步请求，则不会处理

			if(timer){

				return;

			}

			timer = setTimeout(function(){

				syncFile(cache.join(','));

				clearTimeout(timer); //清除定时器

				timer = null; //重置变量

				cache = []; //重置cache数组

			},2000);

		}

	})();

	for(var i = 0; i < checkbox.length; i++){

		checkbox[i].onclick = function(){

			if(this.checked === true){

				syncFileProxy(this.id);

				//可以随时替换成 syncFile(this.id)

			}

		}

	}

</script>

</body>

</html>
巴特西

Javascript 代理模式模拟一个文件同步功能

最新文章

热门文章
