通过指定的时间间隔填充页面的最有效方法
Most efficient way to populate a page through specified time intervals?
我会直接进入它。
布局.html
<table>
<tr>
<td><div id="corner1"></div><div id="c11"></div><div id="c12"></div></td>
<td><div id="corner2"></div><div id="c21"></div><div id="c22"></div></td>
</tr>
<tr>
<td><div id="corner3"></div><div id="c31"></div><div id="c32"></div></td>
<td><div id="corner4"></div><div id="c41"></div><div id="c42"></div></td>
</tr>
</table>
<input type="hidden" value="12" name="tableid" />
主.js
populateID = setInterval(Populate, 1000);
function Populate() {
$.ajax({
url: 'jquery/populate.php',
data: 'tableid=' + $("#tableid").val(),
success: function(data) {
fillem(data);
}
});
}
function fillem(data) {
if(data.c1) {
$("#c11").html(data.c1);
$("#c12").html(data.filler);
}else{
$("#c11").html(data.filler);
}
if(data.c2) {
$("#c21").html(data.c2);
$("#c22").html(data.filler);
}else{
$("#c21").html(data.filler);
}
if(data.c3) {
$("#c31").html(data.c3);
$("#c32").html(data.filler);
}else{
$("#c31").html(data.filler);
}
if(data.c4) {
$("#c41").html(data.c4);
$("#c42").html(data.filler);
}else{
$("#c41").html(data.filler);
}
if(data.timer) {
$("#timer").html(data.timer);
}else{
$("#timer").html("");
}
if(data.corner) {
$("#corner" + data.corner).html("ACTIVE");
}
}
我很确定这可以以更有效的方式完成,我不在乎它是否涉及更改 DOM 结构。
例如,当不会同时使用其中两个时,总是有 4 个"角"div 听起来很糟糕。 而且由于 ajax 响应会在每次请求时更改,因此有时div 在填充新数据时会快速"闪烁",这也很烦人。
感谢您的阅读。
将data.c#
转换为数组,使其data.c[1]
,然后使用简单的for()
循环仅执行单个输出块。
for (i = 1; i <= 4; i++) {
if(data.c[i]) {
$('#c' + i + '1').html(data.c[i]);
$('#c' + i + '2').html(data.filler);
}
}
下面是一些小的修改。试着让我知道,
注意:data['c'+i]
的计算结果将与 data.c1、data.c2、data.c3 和 data.c4 相同
function fillem(data) {
for (var i = 1; i <= 4; i++) {
if (data['c'+i]){
$('#c'+i+'1').html(data['c'+i]);
$('#c'+i+'2').html(data['filler']);
} else {
$('#c'+i+'1').html(data['filler']);
}
}
if(data.timer) {
$("#timer").html(data.timer);
}else{
$("#timer").html("");
}
if(data.corner) {
$("#corner" + data.corner).html("ACTIVE");
}
}
相关文章:
- Javascript袖珍参考,第121页:这是怎么回事;猴子补丁”;方法应该有效
- 在jQuery中创建向下滑动子菜单的最有效方法
- 使用Underscore.js修改json数组中所选元素的更有效方法
- 选择具有值数组的所有元素的最有效方法
- 将JSON存储和恢复到此Ionic应用程序的最有效方法
- 将javascript数组中的项移动到特定位置的有效方法
- 将JS对象数组转换为嵌套形式的最有效方法
- 隐藏具有特定类$.each、for等的元素的有效方法
- 什么's是调用具有可变参数的函数的有效方法
- 选择具有特定数据的所有 html 标记的最有效方法是什么 - [适当性],无论值如何
- 使用 jQuery 调用 PHP 端点的最有效方法
- 比使用大量其他 if 语句更有效的方法
- 为什么不't我的Javascript,如果其他方法有效的话
- 为什么这种用于计算数组重复并将其存储到对象中的方法有效
- 为什么这个javascript单例方法有效
- 为什么此跨域请求解决方法有效
- 为什么在Lightswitch中堆叠承诺的一种方法有效,而另一种方法则不起作用
- 用jquery预处理html的一种方法有效,但为什么另一种方法无效't
- 控制器之间共享服务的脏检查,一种方法有效,另一种方法无效
- 在服务器和客户端之间共享JavaScript模型代码,这种方法有效吗