每个循环的 JQuery 延迟不适用于发布请求答案

【问题标题】：JQuery for each loop with delay not working for post request每个循环的 JQuery 延迟不适用于发布请求
【发布时间】：2016-06-26 18:20:32
【问题描述】：

我必须解析 30 多个对象并将它们发布到一个 php 文件中。有时我会收到一个错误，因为 .each 函数的发布速度很快。我试图通过实现延迟功能来解决这个问题（就像这里提到的：How to add pause between each iteration of jQuery .each()?）。这是我的代码：

              $( "#rules_textfield>div" ).each(function( index ) {
                var delay = (function(){
                  var timer = 0;
                  return function(callback, ms){
                    clearTimeout (timer);
                    timer = setTimeout(callback, ms);
                  };
                })();
                delay(function(){
                  $.post( "getdata.php", { 'parameter1': parameter1, 'parameter2': parameter2})
                  .done(function( data ) {

                    $("#logs_result").append(data);
                  });
                }, 1000);
              });

但它似乎只适用于 1 次迭代。此后的所有迭代都没有延迟。

【问题讨论】：

标签： javascript jquery performance

【解决方案1】：

您没有按照您的相关代码提到的完全相同的方式进行操作。我会从你的代码中删除一些东西

不需要clearTimeout()，因为它会在 setTimeout 完成后执行。
无需返回仅启动 setTimeout() 的函数。

再次查看该工作示例中的代码，每次time += 500; 都会添加到计时器。

所以，做吧

   var time = 1000;
   $( "#rules_textfield>div" ).each(function( index ) {
         setTimeout(function(){
             $.post( "getdata.php", { 'parameter1': parameter1, 'parameter2': parameter2}).done(function( data ) {
                $("#logs_result").append(data);
             });
         }, time);
         time += 1000; //to ensure that delay is introduced for every call
   });

【讨论】：

【解决方案2】：

您可以使用jQuery-timing 插件。

提供易于使用的方法来定义迭代、超时、间隔、延迟和基于事件的循环和处理程序，与您的所有 jQuery 内容一致。

这是一个 CDN 链接：https://cdn.jsdelivr.net/jquery.timing/0.1/jquery-timing.js

$(function() {
  $('#rules_textfield>div').each($).wait(1000, function(index) {
    $.post('getdata.php', {
      'parameter1': parameter1,
      'parameter2': parameter2
    }).done(function(data) {
      $('#logs_result').append(data);
    });
  });
});

示例

$(function() {
  $('#rules_textfield>div').each($).wait(1000, function(index) {
    $('#logs_result').append($('<div>').html(this.html()));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.timing/0.1/jquery-timing.js"></script>

<div id="rules_textfield">
  <div>Foo</div>
  <div>Bar</div>
  <div>Oof</div>
  <div>Rab</div>
</div>
<hr />
<div id="logs_result"></div>

另类

如果您不想使用第三方的插件，您可以创建一个。

(function($) {
  $.fn.eachDelay = function(fn, delay) {
    var time = 0;
    this.each(function(index, el) {
      setTimeout(function(time) {
        fn.call($(el), index, el);
      }, time += delay);
    })
  }
}(jQuery))

$(function() {
  $("#rules_textfield>div").eachDelay(function() {
    $('#logs_result').append($('<div>').html($(this).html()));
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="rules_textfield">
  <div>Foo</div>
  <div>Bar</div>
  <div>Oof</div>
  <div>Rab</div>
</div>
<hr />
<div id="logs_result"></div>

【讨论】：