0

我有一个循环遍历多个唯一 ID 的页面，并使用 ajax 将信息加载到与数据库表中的行相对应的 div 中。因为需要创建的 div 比较多，每个 div 都包含相当多的信息，所以这需要相当长的时间。我想做的是将每个 div 附加到 dom 后对其进行动画/显示，从而允许循环在创建时继续附加/显示更多 div。

我的代码看起来像这样：

// loop section unique IDs
$.each(uniqueIDs, function(key, uniqueID)
{

    // call AJAX synchronously
    // append resulting information to page

    // show newly appended div
    $("#" + uniqueID).slideDown();

});

我遇到的问题是动画非常不一致。有时第一个 div 是动画的，而所有后续的 div 只是没有动画显示。有时所有的 div 都只是显示而没有动画。我相信必须有一个更严格的方法来做到这一点......

编辑我一直在同步调用 ajax 以保持 div 的正确顺序（否则 div 会按照它们完成的顺序附加到 dom）。我很高兴找到一个使用异步 ajax 调用的解决方案，它保留了原始顺序。

4

3 回答 3

1

为每个异步调用使用一个对象数组$.Deffered，然后将其传递给$.when()，其.done()回调只会在所有延迟对象都被解析时触发，即，当所有异步操作完成时：

var uniqueIDs = [1, 2, 3, 4];
var $deferreds = [];            

$.each(uniqueIDs, function (i, elem) {
    $deferreds.push(
      $.ajax({
        // options
      }).done(function (data) {
      })
    );
});

$.when.apply($, $deferreds).done(function () {
   console.log(arguments); // arguments will contain the result of each asynchronous call in order
});

因此，您可以使用该回调div按顺序为您的 s 设置动画。

这是一个演示。

于 2012-09-13T00:05:59.470 回答
0

同步运行AJAX往往会对事物产生这种影响，导致浏览器挂起并等待请求完成，同时无法运行动画。你应该做的是这样的：

// loop section unique IDs
var queue = uniqueIDs.splice(0); // copy array
function runQueue()
{
    if(queue.length == 0) return;
    var uniqueID = queue.shift();
    myAjaxLoadFunction(uniqueId, function() {

        // show newly appended div
        $("#" + uniqueID).slideDown();
        runQueue();

    });

});
runQueue();

Ofc 你可以用 jQuery 函数调用替换 myAjaxLoadFunction，或者你自己的加载函数需要一个回调。

于 2012-09-13T00:06:54.083 回答
0

如何在您的 HTML 中添加带有旋转轮加载图像的父 div。所以是这样的：

您可能想要确定 DIV 的大小并在之前对其进行样式设置，但总体而言，这就是我所说的

<html>
...
<body>
...
<div id="div1"><img src="loading.gif"/></div>
<div id="div1"><img src="loading.gif"/></div>
<div id="div1"><img src="loading.gif"/></div>
...

javascript:

result = $.ajax(...)
$("your divs").each(function(index, value) {
  $(this).empty().append(result[index]);
});

类似的东西，其中 $(this) 是 div 而 result[index] 是您从 ajax 请求中获得的行。
基本上 .empty() 函数保证您加载的 png 将被删除，然后替换为您想要的数据。

祝你好运。

于 2012-09-13T00:12:46.563 回答