0

我正在制作一个 wordpress 插件，并且我有一个导入图像的功能，这是通过一个 $.each()-loop 完成的，该循环在每次迭代时调用一个 .load()-function。加载函数调用的加载函数页面正在下载图像并返回一个数字。该数字被导入跨度元素。源和目标数组是从隐藏 UL 的 LI 元素导入的。

这样，用户会看到一个计数器从零计数到正在导入的图像总数。您可以在下面查看我的 jQuery 代码：

jQuery(document).ready(function($) {

    $('#mrc_imp_img').click(function(){
    var dstA = [];
    var srcA = [];
    $("#mrc_dst li").each(function() { dstA.push($(this).text()) });
    $("#mrc_src li").each(function() { srcA.push($(this).text()) });

        $.each(srcA, function (i,v) {
            $('#mrc_imgimport span.fc').load('/wp-content/plugins/myplugin/imp.php?num='+i+'&dst='+dstA[i]+'&src='+srcA[i]);
        });

    });


});

这工作得很好，但有时看起来加载函数没有像应有的那样快速更新 DOM，因为有时更新 span 的数字低于以前的数字，并且几乎每次都用较低的数字替换最后一个数字结束。我怎样才能防止这种情况发生，当 $.each-loop 准备好时，我怎样才能让它隐藏“#mrc_imp_img”？

4

2 回答 2

1

较早调用的 AJAX 调用不能保证较早完成，因此较小的数字可以覆盖较大的数字。一种解决方案是在每次成功调用时简单地增加计数器：

jQuery(function($) {
  $('#mrc_imp_img').click(function(){
    var dstList = $("#mrc_dst li");
    var srcList = $("#mrc_src li");
    dstList.each(function(i) { 
      var dst = $(this).text();
      var src = srcList[i].text();
      $.post('/wp-content/plugins/myplugin/imp.php?num='+i+'&dst='+dst+'&src='+src, function() {
        $('#mrc_imgimport span.fc').text($('#mrc_imgimport span.fc').text()+1);
      });
    });
  });
});

（更改了代码以避免不必要的数组操作，将 onready 调用更改为使用简写，将 AJAX 调用更改为使用应该用于更改状态的操作的 POST。）

于 2010-05-15T12:21:19.583 回答
0

大多数服务器可能运行有限数量的线程。如果您一次触发 10 个调用，而您的服务器只有 5 个线程，其中 5 个将失败。

另外 - 一旦你最大化所有正在运行的线程，没有其他用户可以访问服务器，所以你本质上是对服务器进行 DOS 操作。

如果您不介意一次将其减慢为一个调用，请执行 Tgr 建议的序列化调用，等到每个调用完成后再开始下一个调用。

我更喜欢尤达的建议。你能做的就是把它变成一个处理整个阵列的服务器调用。如果您真的想更新一个计数器客户端，那么一个服务器调用可以更新数据库中的一个计数器 - 然后第二个 ajax 调用可以每隔几秒钟轮询一次服务器以找出计数器的位置。显然不能保证是连续的，但对您的服务器健康会更好。您也可以伪造顺序方面（如果您在 #3 并且下一个调用产生 #6 - 客户端一个接一个地递增）

就没有看到警报而言，警报行之前或警报行上可能存在 javascript 错误。尝试使用 firebug 和 console.log 语句，或者更好的是，使用 firebug 调试器逐步完成它。

于 2010-05-15T14:58:17.407 回答