Question

我有一个页面，其中包含一些包含基本信息的行。用户可以单击某行以显示更多信息，这需要ajax调用。根据我返回的信息量，此ajax调用可能需要一两秒钟。为了让用户知道我在此期间加载信息，我想附加一些文字说“正在加载”＃39;因此，在我进行ajax调用之前，我会附加一个带有文本＆＃39; Loading＆＃39;并在成功时删除它。然而，即使ajax可能需要一两秒钟，所以一切都必须足够快地发生，以便加载＆＃39;没有出现。如果我在断点处停下来，我可以看到加载文本。所以我决定使用setTimeout，等待时间为0ms，只需要足够长的时间让浏览器呈现我的“加载”。

以下是一些示例代码：

$(document).ready(function () {
  var item;
  $('.my-row').click(function() {
    item = $(this).val();
    $(this).children().append('<span id="loading">Loading..</span>');
    setTimeout(function()
    {
      getMyInformation(item, $(this).next().children());
    }, 0);
  });
});

function getMyInformation(item, appendTo) {
  $.ajax({
    url: myUrl,
    async: false,
    type: "POST",
    data: { Id: item.id, Name: item.name },
    success: function (json) {
      $('#loading').remove();
      appendItems(json.items, appendTo);
    }
  });
}

function appendItems(items) {
  $(items).each(function(i, item) {
    appendTo.append('<div>item.info</div>');
  });
}

这是我的问题：没有setTimeout，页面看起来有点滞后，因为我的“加载”＃39;没有机会出现，但我的信息确实在ajax呼叫后显示。使用setTimeout，我的＆＃39;正在加载＆＃39;出现，其他一切都按预期发生，除了我的所有项目＆＃39;附加。我可以设置一个断点并观察它为我传递的每个项目运行appendTo.append('<div>item.info</div>');，但它们从未在浏览器或DOM中显示。有谁知道发生了什么？

Answer 1

由于this内的setTimeout不再是相同的上下文 - 请事先设置变量：

var elements = $(this).next().children();
setTimeout(function()
{
  getMyInformation(item, elements);
}, 0);

setTimeout并将对象附加到DOM

1 个答案: