我目前有真值表生成器的草图。虽然它工作得很好,但速度相当慢。我添加到的每个布尔值组合<table>
使用 jQuery。对于每个值,有一个<td>
元素由 jQuery 创建,然后添加到<table>
。此外,我使用 jQuery UI 来制作漂亮的按钮集,而不是单选按钮。
在我发布的代码摘录中,table
是一个包含每个布尔组合的数组。也许我的代码有点难以理解,但它基本上归结为 4 个布尔变量(16 种可能性),96<td>
元素是通过添加类来创建的data
属性设置。在第二部分中,创建三组(每组三个单选按钮)并将其转换为 jQuery UI 按钮集。
使用计时器,我发现大约需要 0.4 秒才能将所有内容填满。没什么大不了的,但它确实很引人注目,并且不会对用户产生积极影响,因为每次输入不同的布尔公式时,加载都需要半秒。
$table = $('#table');
$.each(table, function(k, v) {
$tr = $('<tr>').addClass('res').data('number', k);
$.each(v[0], function(k2, v2) {
$td = $('<td>').text(v2).addClass(v2 ? 'green notresult' : 'red notresult');
for(var i = 0; i < 4; i++) {
$td.data(i, i === k2);
}
$tr.append($td);
});
$tr.append($('<td>').addClass('spacing'));
$table.append(
$tr.append(
$('<td>').text(v[1]).addClass(v[1] ? 'green result' : 'red result')
)
);
});
// ... here is some code that's not slowing down
$radiobuttonsdiv = $('#radiobuttonsdiv');
for(var i = 0; i < 4; i++) {
var $radiobase = $('<input>').attr('type', 'radio')
.attr('name', 'a'+i)
.click(handleChange);
// .label() is a custom function of mine which adds a label to a radio button
var $radioboth = $radiobase.clone().val('both').label();
var $radiotrue = $radiobase.clone().val('true').label();
var $radiofalse = $radiobase.clone().val('false').label();
var $td1 = $('<td>').addClass('varname').html(i);
var $td2 = $('<td>').attr('id', i);
$td2.append($radioboth, $radiotrue, $radiofalse).buttonset();
var $tr = $('<tr>').append($td1, $td2);
$radiobuttonsdiv.append($tr);
}
我的问题是:
- 如何优化使用 jQuery 的表格填充?或者在这种情况下,表格可能不是最好的解决方案?
- 是否可以暂停绘图,因为这可能会减慢一切?
尽量避免在循环中使用 .append,尤其是在添加大量元素时。这始终是性能杀手。
更好的选择是使用标记构建一个字符串,并在循环完成时执行一次(或尽可能少的).append。
我发现您正在使用 .data,这使事情变得更加复杂,但另一种选择是使用metadata将结构化标记附加到现有标签的插件。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)