Question

我必须解析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次迭代。之后的所有迭代都没有延迟。

Answer 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
   });

Answer 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>

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

2 个答案:

实施例

替代