一个接一个地执行一个功能答案

【问题标题】：Executing one function after another一个接一个地执行一个功能
【发布时间】：2013-10-02 17:30:33
【问题描述】：

所有这些函数都在主函数中，该函数在 jQuery 异步 AJAX 成功事件之后调用，并且每秒运行一次。这三个函数中的每一个都调用其中的特定函数。

这是我拥有的基本 javascript 代码：

function mainFunction() {
    function selectView(){
       // do stuff
    }
    function startWidgets(){
       // do stuff
    }
    function popData(){
       // do stuff
    }
    $.when(selectView()).then(startWidgets).then(popData);
}

function ajaxCall(){
    ajaxRequest = $.ajax({
        type: "GET",
        url: "",
        data: {},
        async: true,
        cache: false,
        timeout:50000,

        success: function(data){
            mainFunction();
            setTimeout(
                ajaxCall, 5000
            );
        },
        error: function() {
            // error stuff
        },
        complete: function() {
            // complete stuff
        }
    });
}

selectView() - 使用 jQuery .load() 方法根据特定的 AJAX 数据加载 HTML 结构。

startWidgets() - 通过将小部件放入 HTML 结构（基于 ID 和类）来初始化小部件。只运行第一次。

popData() - 根据 AJAX 数据将数据填充到所有其他小部件。

我试过$.when(selectView()).then(startWidgets).then(popData);

但这没有用。我的问题是 startWidgets 通常在 selectView 之前运行，但是由于还没有 HTML 标记，所以它失败了。我需要它们按特定顺序运行，并且在前一个完成之前不会启动。

【问题讨论】：

标签： jquery .when

【解决方案1】：

我还没有测试过，但类似的东西可能会对你有所帮助；）

selectView_done = false;
startWidgets_done = false;

function selectView() {
  // do stuff
  selectView_done = true;
  return ...;
}

function startWidgets() {
  // do stuff
  startWidgets_done = true;
}

function popData() {
  // do stuff
}

function control_selectView(){
  if( selectView_done ){
    startWidgets();
    control_popData();
  }
  else setTimeout(function(){ control_selectView() }, 100);
}

function control_popData(){
  if( startWidgets_done ) popData();
  else setTimeout(function(){ control_popData() }, 100);
}

selectView();
control_selectView();

【讨论】：

【解决方案2】：

您需要从selectView 返回promise 对象，如果您没有从selectView 返回promise，那么when 将认为该对象已解决并执行成功处理程序。

另外我认为最好使用.done()处理回调

function mainFunction() {
    function selectView(){
       // do stuff
       var xhr = $.ajax(....);
       ....
       return xhr;
    }
    function startWidgets(){
       // do stuff
    }
    function popData(){
       // do stuff
    }
    $.when(selectView()).done(startWidgets).done(popData);
}

【讨论】：

我编辑了我的代码并添加了代码来显示我的 AJAX 请求是如何完成的，因为它没有像你拥有的那样在 selectView 函数中完成。这有意义吗？
@zen 那么你有问题......你需要从ajaxCall返回ajaxRequest，并且该值必须从selectView返回......如果你可以分享这些方法我们可以更好看
有什么方法可以在不更改 AJAX 代码的情况下按顺序运行这 3 个函数？如果有更好的解决方案，则不必使用.when() 和.then() 或.done()。
@zen no 因为那时无法知道 ajax 请求何时完成
有没有办法在 AJAX 调用中链接函数？我想我的意思是 mainFunction() 在 AJAX 成功之前不会执行，所以当它执行时，我只需要按顺序运行这 3 个函数。无论如何，在 AJAX 成功之前它们不会运行。