Javascript 渐进式渐变

Question

我使用下面的 javascript 递归地重新加载目标 DIV，其 id="outPut"，在将参数传递给 getData.php 时执行数据查询的结果。问题在于，fadeTo 会淡化每次迭代调用返回的所有数据。

getData 格式化在其自己的 DIV 中返回的每一行数据，因此如果在给定的 selectData 迭代中调用了 10 条记录，并且在 selectData 的下一次迭代之前没有添加新记录，则加载了 10 个返回的数据 DIV into DIV "outPut" 不应该全部消失并返回，而是保持明显不变。但是，如果在 selectData 的下一次迭代之前添加了第 11 条记录，那么只有新的第 11 条记录的 DIV 应该淡入可见，加入以前存在的 10 个 DIV，所有这些 DIV 都应该保持永久可见，因为它们在之前就已经存在迭代。

总结一下，fadeTo 怎么能被用来逐渐淡化到visibility 仅是自上次调用以来的新内容？

function selectData()

{

    $("#outPut").load("getData.php?userid=" + userId + "&flow=" + flow + "&order=" + order).fadeTo(0,0).fadeTo(500,1);

    setTimeout(selectData, 2000);

    $.ajaxSetup
    (
        {
            cache:false
        }
    );
}

Answer 1

如果我对您的理解正确，您的getData.php 页面会返回已放入 DIV 元素中的记录（通过 .load()）然后成为您的主容器 div #outPut 的子 DIV。 getData.php 总是返回记录 1 以后的所有数据。所以你最终会得到类似的东西：

<div id="outPut">
  <div>Record 1</div>
  <div>Record 2</div>
</div>

假设是这样，那么在调用 .load() 之前，您可以检查当前有多少子 DIV，然后是 .load()，然后淡化新的：

var $outPut = $("#outPut");
function selectData() {
  var count = $outPut.children("div").length;
  $outPut.load("getData.php?userid=" + userId + "&flow=" + flow + "&order=" + order,
    function() {
     $outPut.children("div").slice(count).fadeTo(0,0).fadeTo(500,1);
    }
  );

  setTimeout(selectData, 2000);
}

请注意，我已将淡入淡出的代码移至 .load() 方法的完整回调中。