我如何排队 jQuery ajax 请求 [重复]答案

【问题标题】：how do I queue jQuery ajax requests [duplicate]我如何排队 jQuery ajax 请求 [重复]
【发布时间】：2019-03-07 00:16:03
【问题描述】：

AJAX 新手，我构建了一个包含 AJAX 的表单，它将数据发送到另一个页面。我不确定我是否必须为多个 ajax 请求包含一个插件，或者这是否是自动完成的。到目前为止的问题是 $("#userForm")[0].reset();将等到完全成功后再清除输入字段。我希望它可以立即发送并清除，允许用户快速输入请求并建立一个队列以完成请求。

下面是我的表单/ajax

<html>
<head>
<title>fastPage</title>
</head>
<body>
<form id='userForm'>
<div><input type='text' name='name' /></div>
<div><input type='submit' value='Submit' /></div>
</form>

<div id='response'></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>

<script>
<script>
$(document).ready(function(){
    $('#userForm').submit(function(){
        // show that something is loading
        //$('#response').html("<b>Loading response...</b>");
        // Call ajax for pass data to other place
        $.ajax({
            type: 'POST',
            url: 'slowPage.php',
            data: $(this).serialize() // getting filed value in serialize form
        })
        .done(function(data){ // if getting done then call.
            // show the response
            //$('#response').html(data);
            $("#userForm")[0].reset();
        })
        .fail(function() { // if fail then getting message
            // just in case posting your form failed
            alert( "Posting failed." );
        });
        // to prevent refreshing the whole page page
        return false;
    });
});
</script>
</body>
</html>

slowPage.php 只是为了测试 ajax 调用。

<!DOCTYPE html>
<html>
<head>
<title>slowPage</title>
</head>

<?php
session_start();
echo "
    <form action='slowPage.php' method='POST'>
        <input type='text' name='name'>
        <button type='submit'>Search</button>
    </form>";
sleep(10);  
if($_POST){
    echo $_POST['name'];
}

?>

谁能指出我正确的方向来完成这个？

【问题讨论】：

为什么不在 ajax 处理时禁用表单提交？还是您希望他们能够多次提交？
我们希望他们尽可能快地提交多次，slowPage 只是复制一个服务器页面，这可能会很慢，以测试这个想法并为请求建立一个队列。跨度>
这个答案可能会有所帮助：Queue ajax requests using jQuery.queue().
@Yodavish “队列”到底是什么意思？它会等待一个 AJAX 请求完成，然后再将下一个请求发送到服务器？
@mhodges 它会等待一个 AJAX 请求完成，然后再将下一个请求发送到服务器？是的。但是，由于服务器页面可能需要 30 秒来处理，我们希望能够“排队”这些 ajax 请求并允许用户在需要时输入更多内容。

标签： jquery ajax

【解决方案1】：

一种方法是构建您自己的队列代理，它会立即执行推送到队列中的请求，同时一次最多执行 1 个请求。当当前请求处理完毕后，它将自己从队列中移除，并立即开始队列中的下一个请求。

下面的代码是任何 Promise 对象的通用案例，但是，您可以修改传入的内容以满足您的需求，如下所示：

ajaxQueue.addRequest(function() {
  return $.ajax({
    // my ajax options
  })
  .done(function () {
    // ...
  })
  .fail(function () {
    // ...
  });
});

$(function () {
  var ajaxQueue = {
    queuedRequests: [],
    addRequest: function (req) {
      this.queuedRequests.push(req);
      // if it's the first request, start execution
      if (this.queuedRequests.length === 1) {
        this.executeNextRequest();
      }
    },
    clearQueue: function () {
      this.queuedRequests = [];
    },
    executeNextRequest: function () {
      var queuedRequests = this.queuedRequests;
      console.log("request started");
      queuedRequests[0]().then(function (data) {
        console.log("request complete", data);
        // remove completed request from queue
        queuedRequests.shift();
        // if there are more requests, execute the next in line
        if (queuedRequests.length) {
          ajaxQueue.executeNextRequest();
        }
      });
    }
  };
  $("#myForm").on("submit", function () {
    var data = $(this).serialize();
    // reset form right after we grab the data
    $(this)[0].reset();
    ajaxQueue.addRequest(function () {
      // -- your ajax request goes here -- 
      // return $.ajax({
      //   method: "POST",
      //   url: 'slowPage.php',
      //   data: data 
      // }).done(function () { ... }).fail(function () { ... });
      
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve(data);
        }, 2000);
      });
    });
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<label>Send Data: <input name="myData"/></label><br/>
<button>Submit Form</button>
</form>

【讨论】：

酷，我不知道我们可以从这里运行代码。这非常接近我想要的。唯一剩下的就是如果我们点击“Enter”或提交按钮。它清除输入字段，允许用户快速输入新数据。我正在尝试破译您的代码，所有 3 块代码都在一页上吗？另外，我可以在哪里指向 ajax URL 以将数据发送到其他页面？抱歉，我还是 ajax 新手
@Yodavish 好的，我对我的帖子进行了一些编辑，以包含您在帖子中提到的更改。至于要包含哪些代码，您需要包含 $(function () { }); 块内的所有内容
@downvoter 愿意发表评论吗？
谢谢，我会测试一下谢谢你的帮助，非常感谢。
感谢成功！