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>
posted @   defmain  阅读(238)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
点击右上角即可分享
微信分享提示