jQuery each/ajax 在循环时不更新元素答案

【问题标题】：jQuery each/ajax does not update elements while loopingjQuery each/ajax 在循环时不更新元素
【发布时间】：2014-01-09 08:42:35
【问题描述】：

在从 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
});

添加输出：

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) 正在向输出控制台添加一个新的

元素，但这是我的问题所在。输出控制台不会立即更新，而是在 jQuery.each 完成后更新。

我在这里停止异步，因为循环中有另一个 ajax 调用根据列表发送一些请求，但我猜这不是问题，因为我已经在没有它的情况下测试了输出。所以我认为它与jQuery.each有关？

更新：添加了 addOutput

【问题讨论】：

看不到“text”变量的设置位置？！
async 是您可以通过 .ajax() 方法传递的选项，无需执行您的 $.ajaxSetup()
这只是一个示例，显示 addOutput 获取一些文本以显示为某个 div 中的列表元素。一种控制台窗口。元素添加得很好，但我的问题是它们都在 $.each 之后立即显示，而 $.each 仍在运行。
您找到解决方法了吗？我现在正面临同样的问题。

标签： jquery ajax dom each

【解决方案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

前：

<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 时停止。

【讨论】：

也许我应该更详细地解释我的问题。 addOutput 不是这里的问题。该函数将元素添加到 div 窗口，但不是在循环 $.each 时。它正在等待 $.each 完成，然后添加所有元素，但这不是我想要的。我想让它们一一列出，而它仍在循环。顺便说一句，console.log 输出工作正常

【解决方案2】：

如果我没记错的话，只有当请求有完整的响应时才会调用成功，所以这不是问题，所以如果你想让印象从加载列表中消失，你可能需要做一些等待每个 .each 的代码。

为什么要禁用异步？这使得浏览器在执行请求时不会让用户卡屏。

问候，

【讨论】：

Success 被调用，我进入了 $.each 循环，但循环时没有添加元素。 console.log 输出打印得很好。我正在禁用异步，因为我想在 $.each 中执行更多请求，这样我就可以一一看到发生了什么。我只是在为我构建/测试一些后端选项，所以用户不会被卡住。哦，我有某种功能可以稍后取消循环。