Question

我正在尝试从ajax调用中获取一些数据后更新列表。它的工作原理是这样的

$.ajaxSetup({
  async: false
});

$.ajax(jsonUrl, {
        dataType: "json",
        success: function(data) {
          $.each(data.list, function(k,v) {
            addOutput("doing something with "+v);
            (...)
          }
        },
        (...)
});

$.ajaxSetup({
  async: true
});

addOutput：

function addOutput(text, color) {
color = typeof color !== 'undefined' ? color : '#fff';

var date = new Date();
var h = ("0"+date.getHours()).slice(-2);
var m = ("0"+date.getMinutes()).slice(-2);
var s = ("0"+date.getSeconds()).slice(-2);

var li = "<li style='background-color: "+color+"; padding: 2px; pading-left: 3px;'>"+h+":"+m+":"+s+" - "+text+"</li>"
$("#output_list").prepend(li);

}

addOutput（text）正在添加一个新的＆lt; li＆gt;元素到输出控制台，但这是我的问题所在。输出控制台不会立即更新，而是在jQuery.each完成后更新。

我在这里停止异步，因为在循环中有另一个ajax调用来发送一些请求，具体取决于列表，但这不是我想的问题，因为我已经测试了没有它的输出。所以我认为它与jQuery.each有关吗？

更新：添加了addOutput

Answer 1

你可能想要这样做......

$.ajax(jsonUrl, {
        dataType: "json",
        success: function(data) {
          $.each(data.list, function(k,v) {
            addOutput(v); // instead of text, you want to output v. k is index and v is the actual result element
          }
        },
        ...
});

<强> Fiddle DEMO

EX：

<div class="add"></div>

var result = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var index = 0;

$.each(result, function () {
    show();
    debugger;
});

function show() {
    $('.add').append("<h1>" + index + "</h1>");
    index += 1;
}

你会发现调试器停止，同时将每个元素添加到DOM中。

Answer 2

如果我没有错，只有当请求有完整的回复时才会调用成功，因此这不是问题所在，所以如果你想要从加载列表中获得印象，你可能需要做一些代码等待每个.each。

为什么要禁用异步？这使得浏览器可以执行请求，而不会让用户卡住屏幕。

此致

jQuery每个/ ajax在循环时不会更新元素

2 个答案: