How to delay requests in jQuery?

Question

I'm sending some 'for each checkbox checked' requests to a PHP file using jQuery.

How can I delay the requests in jQuery, like every second one request, to the PHP file?

The script sends all requests at same time.

var checked = [] 
$("input[name='checkbox[]']:checked").each(function (){
checked.push(parseInt($(this).val()));
//console.log($(this).val());

var id = $(this).val();

  if (!!window.EventSource) {
     var source = new EventSource("request.php?id="+id+"");
     source.addEventListener('message', function(e) {

        var data = JSON.parse(e.data);
        var entry = data.entry;
        $("#status_"+id+"").html(entry);

        this.close();
        return; 
      }, false);
  }
});

You can use `setInterval()` function. Here is the doc : https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval — kevinniel, Mar 11 '18 at 15:21
Use callback function. After completion of first call the next ajax call and so on. — Prashanth KR, Mar 11 '18 at 18:08
See also: https://stackoverflow.com/questions/729921/settimeout-or-setinterval — admcfajn, Mar 11 '18 at 19:16

Beri · Accepted Answer · 2018-03-11T19:20:55.843

First solution:

You can do it by using setInterval()

$("input[name='checkbox[]']:checked").each(function (){
    var that = $(this); // reference to each checkbox
    setInterval(function(){ // set function to be executed after delay
       checked.push(parseInt(that.val()));
       //console.log(that.val());

      var id = that.val()
      ...
    }, 5000); //set the delay
});

This will delay each iteration by 5 seconds. But here you will have to remember each checkbox before using setInterval function, so extract $(this), like in above example.

Second solution:

You could also have a look on when() method from JQuery. To wait for each Ajax call to complete. It may be more effective.

So you could split your checkboxes into chunks, and process each chunk at the same time, then call for another chunk. This way you will complete all requests faster, without throwing everything at the same time.

score 0 · Answer 2 · answered Mar 11 '18 at 19:19

You can do it by using setTimeout() also

$("input[name='checkbox[]']:checked").each(function (){
    var that = $(this); // reference to each checkbox
    setInterval(function(){ // set function to be executed after delay
       checked.push(parseInt(that.val()));
       //console.log(that.val());

      var id = that.val()
      ...
    }, 8000); //set the delay 8 seconds 
});

This will delay each iteration by 8 seconds. But here you will have to remember each checkbox before using setTimeout function, so extract $(this), illustrated in above example.

walker2k · Answer 3 · 2018-03-16T11:27:15.483

I've solved it with a combination with delaying and a single request to PHP file for each checkbox.

For everyone who need's the same solution, here's the code.

HTML:

<input id="checkbox_1" name="checkbox[]" type="checkbox" value="1">
<input id="checkbox_2" name="checkbox[]" type="checkbox" value="2">
<input id="checkbox_3" name="checkbox[]" type="checkbox" value="3">

<input type="button" onClick="request()" value="request">

<div id="status_1"></div>
<div id="id_1"></div>
<div id="request_1"></div>

<div id="status_2"></div>
<div id="id_2"></div>
<div id="request_2"></div>

<div id="status_3"></div>
<div id="id_3"></div>
<div id="request_3"></div>

JS:

function request(){
var checked = []
$("input[name='checkbox[]']:checked").each(function ()
{
checked.push(parseInt($(this).val()));
});
var selected = checked.join('|');

x = 0;
var n = selected.split('|');

n.forEach(function(id,request) {
x = x +1;
request = request +1;

function delay() {

$.post("request.php",
{
id: id,
request: request
},
function(data){

var obj = JSON.parse(data);
$("#status_"+id+"").html(obj[0].status);
$("#id_"+id+"").html(obj[0].id);
$("#request_"+id+"").html(obj[0].request);
});
} window.setTimeout(delay, x*1000);
});
}

PHP:

$id = $_REQUEST['id'];
$request = $_REQUEST['request'];

echo '
[{"status":"ok",
"id":"'.$id.'",
"request":"'.$request.'\r"}]';

How to delay requests in jQuery?

3 Answers3