Question

我有一个输入字段。每当输入字段中的文本发生变化时，我都会对process.php进行ajax调用

我需要处理所有回复。但有些回复很早就会出现，而有些则迟到了，具体取决于输入。因此，响应的顺序与进行ajax调用的顺序不同。

所以现在我通过设置async：false

来做到这一点

但我不希望客户端由于异步而被卡住：false

$("#text_input").on("input", function() {

    var password = $("#text_input").val();
    var length = password.length;

    $.ajax({
        url: "process.php",
        type: "POST",
        async: false,
        data: {
            password: $(this).val()
        }
    }).done(function (data) {

        console.log(data);

        console.log(password + " : " + length);

    }).fail(function( jqXHR, textStatus, errorThrown ) {
        alert( "Request failed: " + textStatus + " , " + errorThrown );
    });

});

我试着查看承诺，但不明白是否可以在这里应用。

如何按顺序执行回复？

Answer 1

异步的问题恰恰在于，这是异步的，这意味着代码运行时无需等待完成。因此，您的所有请求都会转到服务器，一旦它们开始返回，您的代码就会捕获它们并执行它们。

如果你想按顺序处理它们，你需要建立一个队列和代码来处理队列。

然后，您应该为您的所有请求分配一个有序号码，然后应该在响应中（因此您知道响应的正确顺序）。

然后您可以将响应添加到队列中，并调用处理队列的方法，但该方法只按顺序处理队列，这意味着它只处理从0,1,2,3等开始的响应。因此，如果在队列中有结果5而不是结果0，则队列将不会被处理，只有当结果0存在时才会处理队列，等等......

以下是一个示例代码，我还没有对其进行测试，但是应该可以使用，或者至少应该让您知道如何开始：）

＆＃13;

var currentOrder = 0;
var queue = [];

function processQueue() {
  // Sort the queue
  queue.sort(function(a, b) {
    var aOrder = a.order;
    var bOrder = b.order;

    if (aOrder < bOrder) {
      return -1;
    }
    if (aOrder > bOrder) {
      return 1;
    }
    // Order is equal (this shouldn't happen)
    return 0;
  });

  if (queue[0].order === currentOrder) {
    doSomething(data);
    queue.splice(0, 1); // Remove the first item from the queue as it's already processed
    currentOrder++;
    processQueue(); // Process the queue again
  }
}

// Do something with the data
function doSomething(data) {
  console.log(data);
}

$('#text_input').on('input', function() {
  $.ajax({
    url: 'process.php?order=' + order, // We send the order to the backend so it can be returned in the response
    type: 'POST',
    data: {
      password: $(this).val()
    }
  }).done(function(data) {
    // Data should contain the order somewhere, let's say for example it's a json and it's inside data.order
    queue.push(data);
    processQueue();
  });
});

＆＃13;

Answer 2

为什么不在他们按输入字段上的某个字母时使用setTimeout function。你可以这样做：

setTimeout(function(){
     $.ajax({
       url: "process.php",
       type: "POST",
       data: {
           password: $(this).val()
       }
   }).done(function (data) {

       console.log(data);

       console.log(password + " : " + length);

   }).fail(function( jqXHR, textStatus, errorThrown ) {
       alert( "Request failed: " + textStatus + " , " + errorThrown );
   });
}, 1000);

这是按下输入字段后的setTimeout并等待1秒，然后在输入字段上完成输入后，它将在1秒后生成ajax。

Answer 3

假设您只对最新的ajax调用的结果感兴趣，可以将$ .ajax调用返回的值（jqXHR对象）分配给变量，然后在触发新的请求时中止该请求。

类似的东西：

var request = null;

$("#password_input").on("input", function() {
    var password = $("#password_input").val();
    var length = password.length;

    // you can also check the type of the variable, etc.
    if (request) {
        request.abort();
    }

    request = $.ajax({
        url: "process.php",
        type: "POST",
        ...

如何按顺序执行jQuery AJAX调用？

3 个答案: