在Javascript中检查2000复选框的快速方法?
我有一个网页上有几千个复选框,并且想添加一个“全部检查”功能。不幸的是,我目前的实施挂了谷歌浏览器至少五秒钟。在Javascript中检查2000复选框的快速方法?
这里是我(使用jQuery)尝试:
$('input').attr('checked', true); // as well as...
$('input').click();
我认为,实际的Javascript运行速度快,但浏览器可能会遇到问题渲染所有的更新如此之快。我可以做别的事吗?
下面是一个简单的例子:https://www.msu.edu/~weinjare/checkboxes.html
我也跑了Chrome浏览器内置的探查,并得到这些结果:
访问DOM直接属性可以更快,但我的猜测是,它不会显著快:
var els = $('input');
for (var i = 0; i < els.length; i++) {
els[i].checked = true;
}
但正如你所说,最大的问题可能是渲染。您可以尝试在0毫秒的setIntervals内批处理执行。这会不会加速任何东西,但至少会停止“挂”:
var els = $('input'), i = 0;
var interval = setInterval(function() {
var batchLen = i + 100 > els.length ? els.length : i + 100;
for (; i < batchLen; i++) {
els[i].checked = true;
}
if (i === els.length) clearInterval(interval);
}, 0);
它需要大约0.5秒,Firefox浏览器。你确定问题是Google Chrome吗?
尝试:
$('input[type="checkbox"]').attr('checked', true);
DOM操作是很慢的,你已经注意到......的东西,你可以做,以避免占用浏览器是使用方便的“setTimeout”功能可让您延迟功能的执行。这样,你返回线程浏览器,使其响应...
var checkAll = function() {
var inputs = $('input');
var n = inputs.length;
for (var i = 0; i < n; i++) {
(function(i){
setTimeout(function(){
$(inputs.get(i)).attr('checked', true);
},0);
})(i);
}
return false;
};
我不是一个铬的大粉丝。我试着在我有一个旧版本的chrome & jquery。
正式版本2200 的Mozilla/5.0(窗口; U; Windows NT的5.2; EN-US)为AppleWebKit/525.13(KHTML,例如Gecko)铬/ 0.2.149.30 Safari/525.13
的jQuery 1.4.2
复选框在0.5秒内被检查。你使用什么版本?
这个解决方案的实际实现除了Chrome之外,如果您先清空复选框容器,则将该生成的字段生成为字符串并将其附加回DOM。所以,在你的例子这将是(只需要围绕复选框与ID箱子一个div)
<script>
var checkAll = function() {
html ="";
$("#boxes").empty();
for (i=0;i<2000;i++) {
html+="<input type=checkbox checked>";
}
$("#boxes").append(html);
return false;}
var uncheckAll = function() { html ="";
$("#boxes").empty();
for (i=0;i<2000;i++) {
html+="<input type=checkbox>";
}
$("#boxes").append(html);
return false;};
</script>
Tab键+空格键会工作得很好... =] – Vinnie 2011-02-01 05:18:55
我觉得你的第一个问题是事实,有屏幕上有很多复选框。我知道这是你想听到的,但我会考虑重新思考UI。 – griegs 2011-02-01 05:20:35
奇怪的是,在Firefox中速度更快。 – Keltex 2011-02-01 05:21:13