依次执行Javascript/jQuery函数答案

【问题标题】：Carry out Javascript/jQuery functions in a sequence依次执行Javascript/jQuery函数
【发布时间】：2014-09-08 11:58:12
【问题描述】：

我想酿酒。我的功能是：

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

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

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

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

【问题讨论】：

jQuery 承诺是要走的路。它支持使用$.when(PassArrayOfPromises)和promise.then()等并行或串行运行多个任务
@TrueBlueAussie，把你的评论作为答案。
@Jashwant：已经贴出来了，但是没时间举个实际的例子（我通常喜欢这样做）
见stackoverflow.com/q/16384841/218196

标签： javascript jquery

【解决方案1】：

jQuery Deferred Objects & Promises 是要走的路。 http://api.jquery.com/category/deferred-object/

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

【讨论】：

【解决方案2】：

在$.ajax调用前一个函数的success处理函数中调用下一个函数！

例子：

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

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

【讨论】：

【解决方案3】：

您可以通过确保您的async: false 设置中有async: false 来使您的Ajax 调用同步（按顺序）。

例如：

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

         }
});

【讨论】：

从不永远推荐async: false!!!这将导致比正确执行更多的问题。这当然无助于任何并行要求。（谁赞成这个？）
这里的并行要求在哪里？
不明确，但司空见惯，但不是重点。 async: false 是一场等待发生的灾难，应该从 jQuery.ajax 中完全删除（恕我直言）！

【解决方案4】：

第一个解决方案：

通过设置 async 使您的 ajax 调用同步：设置 ajax 调用时为 false

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

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

第二种解决方案：

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

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

第三种解决方案：

将您的下一个调用设为成功处理程序，或从成功处理程序调用下一步

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

【讨论】：

从不永远推荐async: false。这将导致比正确执行更多的问题。第二和第三个选项是合适的。
我不同意。我在处理很简单的简单情况下使用它，例如检查服务器上的标志以查看用户是否已登录，并且它可以很好地保持我的逻辑流程简单，无需将回调函数传递给方法检查用户的状态。话虽这么说，我应该不考虑这一点，因为我同意这是因为更密集的电话而停止了
响应时间长的话，你把浏览器绑起来没问题吧？随意不同意，但你会发现更多的人会同意永远不要使用async: false :)
问题是 async: false 是不可预测的。网络连接总是会出现问题，如果延迟太大，用户界面无响应就会很明显，这是最糟糕的用户体验。当然，如果你不编写生产代码，你可以做任何你想做的事情；）Promise 让编码异步过程变得非常简单。
@FelixKling - 好极了。到目前为止，我还没有使用我的方法遇到过这样的问题，而且我从来没有想过会发生这样的事情。我必须将它呈现给我们的产品经理，以开始讨论改用延迟对象而不是异步 false 的价值。假设他认为付出的努力值得结果，我可能会倾向于做一些研究并可能改变我的看法。

【解决方案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

            } 
        });
    }

【讨论】：

【解决方案6】：

如果你想让它保持整洁，让人们看到你的调用是如何进行的，你可以像这样简单地将回调函数传递给另一个：

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

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

【讨论】：