Question

我想要一些酒。我的功能是：

function wine(){
    growGrapes();
    process(grapes);
    makeWine();
    bottle();
}

但是，由于我的函数通常包含$.ajax()请求，因此首先执行其他一些函数。我使用了成功工具，但它仅对一个ajax请求有帮助。

success:function(result){
    //Some Code         
}

我真正想要的是一个序列。从字面上看，葡萄在种植前会得到加工。什么是最简单的方法？

Answer 1

jQuery Deferred Objects＆amp;承诺是要走的路。 http://api.jquery.com/category/deferred-object/

它们支持并行或串行运行多个任务，使用$.when(PassArrayOfPromisesToRunInParallel)并行运行进程，promise.then()依次运行项目。

Answer 2

调用上一个函数的success调用的$.ajax处理程序中的下一个函数！

示例：

function growGrapes(){
  // lines of code
  $.ajax({
    success: function(result){
      // call next function here - process(grapes); and so on...
    }   
  });   
}

以上确保函数在另一个之后顺序调用..

Answer 3

第一个解决方案：

通过在设置ajax调用时设置async：false来使ajax调用同步

$.ajax
({
   async : false,
   /* other settings */
});

警告：此解决方案会导致UI进行密集处理。在服务器上执行严格的操作时，永远不应该使用它。我建议使用它只是在检查标志或加载简单数据时使用它。

第二个解决方案：

如评论中所述，使用jQuery promises设置排序。 Here is a tutorial

我会尽快回来并提供此解决方案的代码示例

第三个解决方案：

让您的下一次调用成功处理程序，或从成功处理程序中调用下一步

$.ajax
({
   success : NextStep,
   /* other settings */
})

Answer 4

您可以通过确保async: false设置中$.ajax()来同步（按顺序）启用Ajax调用。

例如：

$.ajax({ url: 'url', 
         async: false,
         dataType: 'json',
         success: function(data) {

         }
});

Answer 5

一种解决方案是使用queue（）函数。这样您就可以执行任意数量的功能

    var ajaxQueue = $({});


    $.ajaxQueue =  function(ajaxOpts) {  

        // queue the method. a second call wont execute until this dequeues
        ajaxQueue.queue(function(next) {
            // for this example I serialize params, but you can save them in several variables 
            // and concat into ajaxOpts.data
            var params = method_that_get_params_and_serialize_them();
            ajaxOpts.data = params;      

            ajaxOpts.complete = function() {       
                next();
            };

            $.ajax(ajaxOpts);
        });
    };

然后你的功能应该是这样的：

    function growGrapes(){
        $.ajaxQueue({
            cache: false,
            type: "POST",
            url: "someUrl",
            dataType: "json",
            data: "", // we fill data inside  ajaxQueue() method
            success: function( response) {                      
                //do things with response

            } 
        });
    }

Answer 6

如果你想保持整洁，让人们看到你的通话方式，你可以简单地将回调函数传递给另一个，如下所示：

function growGrapes(callback) {
  $.ajax({
  ...
    success: function (){
      // Something
      if (typeof callback === typeof Function) callback();
    },
  ...
  });
} 

function wine(){
  growGrapes(function (){
    process(grapes);
  });
}

按顺序执行Javascript / jQuery函数

6 个答案: