Question

我有一个循环遍历多个唯一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调用的解决方案，它保留了原始顺序。

Answer 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设置动画。

这是 DEMO 。

Answer 2

同步运行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，或者用你自己的函数来加载回调函数。

Answer 3

如何在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，结果[index]是你从ajax请求获得的行。
基本上.empty（）函数保证您的加载png将被删除，然后替换为您想要的数据。

祝你好运。

使用jquery动画/显示div，而ajax加载更多结果

3 个答案: