变态的全选（上万个复选框的全选你享受过吗？）

Aaron5 2011-05-17

上万个复选框的全选你享受过吗？
这个有必要吗？
上帝（客户）说这个可以有
我说这个真没有
上帝说这个必须有
于是也就有了（汗。。。上帝果然强大----不过开工的还是咋们）

首先。咋们来模拟个一万条记录的复选看看会出现啥情况吧。

	//在页面id为tttt的div中添加10000个复选框
	for(var i=1; i <= 10000; i++){
		$('#tttt').append('<input type="checkbox" class="test" value="'+ i +'"> 测试数据' + i +'<br>');
	}

是不是很神奇，说有一万个复选框就能有。

接着，不是要全选吗。咋就给他来个全选爽一下（不知道爽他还是爽自己，权当是：大家爽才是真的爽吧）

	//ID为selAll的按钮单击事件
	$('#selAll').click(function(){
		var m = $('.test');
		var len = m.length;
		
		for(var i=0; i< len; i++){
			m[i].checked = true;
		}
	});

结果可以想象，浏览器直接假死了过去（幸好不是咱自个假死过去）

假死，这个应该在意料之中吧。那到底是什么导致假死呢？
分析全选的过程，大致应该是获取每个复选框的HTML元素，然后将checked属性改为true，之后浏览器的渲染线程将这个改动效果渲染出来。

问题应该看出来在哪里了，一次处理太多的元素了。既然一次处理太多，咋们就分批处理了它。那按什么规则分批呢？

我想到的是两种分批思路：
1、按页面区域划分：像浏览地图一样，看到哪部分加载哪部分。
2、按时间块划分：分成多个时间片，每个时间片处理若干条记录。

奈何第一种思路感觉不好下口，还是第二种容易，用起来有现成的setTimeout和setInterval可以使用。。。just do it！

OOXX了好几分钟，终于写了十几行代码

	//记录长度
	var s_start = 0;
	//统计处理条数
	var s_count = 1;
	//每次处理的条数
	var s_length = 100;

	//全选函数:每秒页面选中100条（渲染100条），
	//防止由于全选上万条带来的页面渲染压力。
	function selectAll()
	{
		var m = $('.test');
		var len = m.length;
		
		setInterval(function(){
			for(var i=s_start; i< s_start+s_length; i++){
				if(i < len){
					//m[i].checked = (m[i].checked == true) ? false : true;
					m[i].checked = true;
					s_start++;
					s_count++;
					if(s_count == s_length){
						s_count = 0;
						return;
					}
				}else{
					return;
				}
			}
		}, 1000);
		
	}
	
	//全选按钮单击事件
	$('#selAll').click(selectAll);

这样就完成了，每秒只在页面上渲染100条记录。

第一步直接显示一万条记录的时候也应该是可以按这个思路来渲染页面的。

经测试：在IE8和Firefox4下渲染的页面滚动速度很流畅，而chrome11在鼠标滚轮滚动的时候似乎卡卡的。

--------------------------------------- 悲催的分割线 ----------------------------------------------------------------------------------------

这个问题经过int08h处理，证明是我想多了,Javascript和dom操作的知识还很太薄弱，多谢大家的指导和回复。
不移出DOM，用了113232ms
移出DOM，用了157ms
根本不需要考虑别的方式了，直接移出DOM操作就行

Javascript代码
var t = $('#tttt').detach();
t.find(':checkbox').attr('checked', true);
t.appendTo('body');

引用

http://pittwu.iteye.com/blog/1047078