Question

我需要执行3个ajax请求。我知道它们在默认情况下恰好是异步的（并且使它们同步混淆VM，所以我不想这样做。）我这样做的方法是通过调用函数三次传递变量。 / p>

result = '';
parse(var1);
parse(var2);
parse(var3);
view();

function parse(variable) {
    //ajax request here
    $.ajax({
        type: 'POST',
        url: 'script.php',
        data: {variable: variable},
        success: function (data) {
            //result stored in a global variable
            result += data;
        }
    });
}
function view() {
    //do something with result
}

但是现在，当结果没有完成烹饪时，会立即触发view（）。如何将它们设置为一个接一个地发生？我读到了关于回调的内容，但由于我没有3个不同的功能但只有一个采用不同的变量，所以它们非常令人困惑。

Answer 1

您可以将变量存储在数组中并使用函数进行ajax调用：

var variables = [var1, var2, var3];

function callParse() {
  if(variables.length) {
    var currentVar = variables.shift();
    parse(currentVar);
  }
  else {
    view();
  }
}

function parse(variable){
  //ajax request here
  $.ajax({
    type:"POST",
    url:'script.php',
    data:{variable:variable},
    success:function(data)
    {
      result+=data;
      callParse();
    }
  });
}

function view(){
//do something with result
}

Answer 2

尝试链式承诺 - 来自：https://css-tricks.com/multiple-simultaneous-ajax-requests-one-callback-jquery/

$.when(
  // Get the HTML
  $.get("/feature/", function(html) {
    globalStore.html = html;
  }),

  // Get the CSS
  $.get("/assets/feature.css", function(css) {
    globalStore.css = css;
  }),

  // Get the JS
  $.getScript("/assets/feature.js")

).then(function() {

  // All is ready now, so...

  // Add CSS to page
  $("<style />").html(globalStore.css).appendTo("head");

  // Add HTML to page
  $("body").append(globalStore.html);

});

Answer 3

您可以尝试这样做：

parseAndView([var1, var2, var3]);

function parseAndView(vars, index) {
    index = index || 0; //initialize index if not passed

    //execute the AJAX call only if there are more variables to parse
    if (index < vars.length)
        //ajax request here
        $.ajax({
            type: "POST",
            url: 'script.php',
            data: {variable: vars[index]},
            success: function (data) {
                // result stored in a global variable
                result += data;
                // recursive call to parse another variable
                parseAndView(vars, index++);
            }
        });
    else
        view();
}

function view() {
  //do something with result
}

如何在Javascript中对递归回调进行排序？

3 个答案: