每个循环的 JQuery 延迟对后置请求不起作用

JQuery for each loop with delay not working for post request

本文关键字：请求 不起作用 延迟 循环 JQuery      更新时间：2023-09-26

我必须解析 30+ 个对象并将它们发布到 php 文件中。有时我会收到错误，因为 .each 函数的速率发布到快速。我试图通过实现延迟函数来解决这个问题（就像这里提到的：如何在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 次迭代。在此之后的所有迭代都没有延迟。

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

  1. 不需要clearTimeout()，因为它在 setTimeout 完成后无论如何都会被执行。

  2. 无需返回仅启动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
   });

你可以使用 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>

相关文章：