javascript - 使用 $.each 函数缩短 js 脚本

Question

我有以下 .js 代码，它读取 json 文件以每分钟更新 html 中的值。

$(document).ready(updateData);
function updateData() {
    $.ajaxSetup({ cache: false });
    $.getJSON("data/data.json", function(result){
        $('#id1').empty();
        $('#id1').append(result.id1);
        $('#id2').empty();
        $('#id2').append(result.id2);
        $('#id3').empty();
        $('#id3').append(result.id3);
        $('#id4').empty();
        $('#id4').append(result.id4);
        $('#id5').empty();
        $('#id5').append(result.id5);
        $('#id6').empty();
        $('#id6').append(result.id6);
        $('#id7').empty();
        $('#id7').append(result.id7);
        $('#id8').empty();
        $('#id8').append(result.id8);
        $('#id9').empty();
        $('#id9').append(result.id9);
    });
    setTimeout(updateData, 60000);
}

可以使用 $.each() 函数以更短的方式重写吗？

Answer 1

可以使用简单的 for 循环对其进行改进:

$.ajaxSetup({ cache: false }); // 1
$(document).ready(updateData);

function updateData() {
  $.getJSON("data/data.json", function(result) {
    for (var i = 1; i<= 9; i++) {
      $('#id' + i).empty().append(result['id' + i]); // 2
    }

    setTimeout(updateData, 60000); // 3
  });
}

但是，通过串联 ID 访问 DOM 看起来不太好。
例如，您可以尝试使用 CSS 类和 data-attributes 来实现它。

一些小的改进:

1. ajaxSetup只能初始化一次，不需要每次都调用它。
2. 您可能不需要同时使用empty() 和append()。如果是文本，则只需使用 .text() 或 .html()(对于 HTML)即可。
3. 最好在 getJSON 回调中调用 setTimeout，以便在上一个请求完成后 60 秒内更新数据，在 .always() 处理程序中更好。想象一下，您的一个客户端的连接速度非常慢，加载此 JSON 需要 60 秒以上。这会带来意想不到的结果。