0

I have to parse 30+ objects and post them to a php file. Sometimes I get an error because the rate of the .each function is posting to fast. I tried to fix this by implementing a delay function (like mentioned here: How to add pause between each iteration of jQuery .each()?). This is my code:

              $( "#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);
              });

But it seems only to work for 1 iteration. All the iterations after this are without a delay.

Community
  • 1
  • 1
yoano
  • 1,466
  • 2
  • 16
  • 20

2 Answers2

3

You are not doing it in the exact same manner which your related code has mentioned. I would remove a couple of things from your code

  1. No need for clearTimeout() since it is getting executed anyways after setTimeout is getting completed.

  2. No need to return a function that just starts a setTimeout().

Look at the code in that working example again, it is adding to the timer everytime time += 500;.

So, just make it

   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
   });
gurvinder372
  • 66,980
  • 10
  • 72
  • 94
1

You can use the jQuery-timing plugin.

Provides easy-to-use methods to define iterations, timeouts, intervals, Deferreds, and event-based loops and handlers just in line with all your jQuery stuff.

Here's a CDN link: 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);
    });
  });
});

Example

$(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>

Alternative

If you do not want to use a plugin from a third party, you can create one.

(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>
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132