如何延迟 jQuery 中的请求？

Question

我正在使用 jQuery.

向 PHP 文件发送一些 'for each checkbox checked' 请求

如何将 jQuery 中的请求像每秒一个请求一样延迟到 PHP 文件？

脚本同时发送所有请求。

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

Answer 1

第一个解法：

您可以使用 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
});

这将使每次迭代延迟 5 秒。但是在这里你必须在使用 setInterval 函数之前记住每个复选框，所以像上面的例子一样提取 $(this)。

第二种解法:

您还可以查看 JQuery 中的 when() 方法。等待每个 Ajax 调用完成。它可能更有效。

所以你可以将你的复选框分成块，同时处理每个块，然后调用另一个块。这样您将更快地完成所有请求，而不会同时抛出所有内容。

Answer 2

您可以使用 setTimeout() 也可以做到这一点

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

这将使每次迭代延迟 8 秒。但是在这里你必须在使用 setTimeout 功能之前记住每个复选框，所以提取 $(this)，如上例所示。

Answer 3

我结合延迟和对每个复选框的 PHP 文件的单个请求解决了这个问题。

对于需要相同解决方案的每个人，这里是代码。

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"}]';

如何延迟 jQuery 中的请求？

How to delay requests in jQuery?

jquery

request

delay