你如何让javascript代码执行*按顺序*

Question

好的，我很欣赏 Javascript 不是 C# 或 PHP，但我不断回到 Javascript 中的一个问题 - 不是 JS 本身，而是我对它的使用。

我有一个函数：

function updateStatuses(){

showLoader() //show the 'loader.gif' in the UI

updateStatus('cron1'); //performs an ajax request to get the status of something
updateStatus('cron2');
updateStatus('cron3');
updateStatus('cronEmail');
updateStatus('cronHourly');
updateStatus('cronDaily');

hideLoader(); //hide the 'loader.gif' in the UI

}

问题是，由于 Javascript 迫切希望在代码中向前跳转，加载程序永远不会出现，因为 'hideLoader' 函数会直接运行。

我该如何解决这个问题？或者换句话说，我怎样才能让一个javascript函数按照我在页面上写的顺序执行......

Answer 1

出现问题是因为 AJAX 本质上是异步的。这意味着 updateStatus() 调用确实按顺序执行，但立即返回，并且 JS 解释器在从 AJAX 请求中检索任何数据之前到达 hideLoader()。

您应该在 AJAX 调用完成的事件上执行hideLoader()。

Answer 2

这与代码的执行顺序无关。

加载程序图像从不显示的原因是，在您的函数运行时 UI 不会更新。如果您在 UI 中进行了更改，它们不会出现，直到您退出函数并将控制权返回给浏览器。

您可以在设置图像后使用超时，让浏览器有机会在开始其余代码之前更新 UI：

function updateStatuses(){

  showLoader() //show the 'loader.gif' in the UI

  // start a timeout that will start the rest of the code after the UI updates
  window.setTimeout(function(){
    updateStatus('cron1'); //performs an ajax request to get the status of something
    updateStatus('cron2');
    updateStatus('cron3');
    updateStatus('cronEmail');
    updateStatus('cronHourly');
    updateStatus('cronDaily');

    hideLoader(); //hide the 'loader.gif' in the UI
  },0);
}

还有另一个因素也会使您的代码看起来执行无序。如果您的 AJAX 请求是异步的，则该函数不会等待响应。处理响应的函数将在浏览器收到响应时运行。如果您想在收到响应后隐藏加载器图像，则必须在最后一个响应处理程序函数运行时执行此操作。由于响应不必按照您发送请求的顺序到达，因此您需要计算当最后一个响应到达时您知道多少响应。

Answer 3

安装 Firebug，然后在 showLoader、updateStatus 和 hideLoader 中添加这样的一行：

Console.log("event logged");

您将在控制台窗口中看到对您的函数的调用，它们将按顺序排列。问题是，您的“updateStatus”方法是做什么的？

大概它会启动一个后台任务，然后返回，因此您将在任何后台任务完成之前调用 hideLoader。您的 Ajax 库可能有一个“OnComplete”或“OnFinished”回调 - 从那里调用以下 updateStatus。

Answer 4

如果您在进行 AJAX 编程，则需要将 JavaScript 视为基于事件的而不是过程的。您必须等到第一个调用完成才能执行第二个调用。这样做的方法是将第二个调用绑定到第一个调用完成时触发的回调。在不了解 AJAX 库的内部工作原理的情况下（希望您使用的是库），我无法告诉您如何执行此操作，但它可能看起来像这样：

showLoader();

  updateStatus('cron1', function() {
    updateStatus('cron2', function() {
      updateStatus('cron3', function() {
        updateStatus('cronEmail', function() {
          updateStatus('cronHourly', function() {
            updateStatus('cronDaily', funciton() { hideLoader(); })
          })
        })
      })
    })
  })
});

这个想法是，updateStatus 接受它的普通参数，加上一个回调函数，以便在它完成时执行。将运行onComplete 的函数传递给提供此类钩子的函数是一种相当常见的模式。

更新

如果您使用 jQuery，可以在此处阅读 $.ajax()：http://api.jquery.com/jQuery.ajax/

您的代码可能如下所示：

function updateStatus(arg) {
  // processing

  $.ajax({
     data : /* something */,
     url  : /* something */
  });

  // processing
}

您可以修改您的函数以将回调作为其第二个参数，如下所示：

function updateStatus(arg, onComplete) {
  $.ajax({
    data : /* something */,
    url  : /* something */,
    complete : onComplete // called when AJAX transaction finishes
  });

}

Answer 5

我们的一个项目中有类似的东西，我们通过使用计数器解决了它。如果您为每次调用 updateStatus 增加计数器并在 AJAX 请求的响应函数中减少它（取决于您使用的 AJAX JavaScript 库。）

一旦计数器达到零，所有 AJAX 请求都已完成，您可以调用 hideLoader()。

这是一个示例：

var loadCounter = 0;

function updateStatuses(){
    updateStatus('cron1'); //performs an ajax request to get the status of something
    updateStatus('cron2');
    updateStatus('cron3');    
    updateStatus('cronEmail');
    updateStatus('cronHourly');
    updateStatus('cronDaily');
}

function updateStatus(what) {
    loadCounter++;

    //perform your AJAX call and set the response method to updateStatusCompleted()
}

function updateStatusCompleted() {
    loadCounter--;
    if (loadCounter <= 0)
        hideLoader(); //hide the 'loader.gif' in the UI
}

Answer 6

将 updateStatus 调用移至另一个函数。以新函数为目标调用 setTimeout。

如果您的 ajax 请求是异步的，您应该有一些东西来跟踪哪些请求已完成。每个回调方法都可以在某处为自己设置一个“完成”标志，并检查它是否是最后一个这样做的。如果是，则让它调用 hideLoader。

Answer 7

正如其他人所指出的，您不想进行同步操作。拥抱异步，这就是 AJAX 中的 A 所代表的意思。

我只想提一个关于同步与异步的很好的类比。你可以看entire post on the GWT forum，我只是包括相关的类比。

想象一下，如果你愿意......

你坐在沙发上看 电视，并且知道你已经离开了 啤酒，你请你的配偶来取悦 跑到酒类商店和 给你拿一些。一看到就 你的配偶走出前门， 你从沙发上爬起来 走进厨房，打开 冰箱。令你惊讶的是，没有 啤酒！

当然没有啤酒，你的 配偶仍在旅行中 酒品店。你得等到 [s]他在你预料到之前就回来了 喝杯啤酒。

但是，你说你想要同步？再想象一下……

...配偶走出门...现在， 你周围的整个世界都停止了，你 不要呼吸，回答 门，或看完你的节目 当[s]他跑过城镇去 拿你的啤酒。你只需要坐下 没有移动肌肉，并且 变蓝直到你输 意识……唤醒一些 无限期之后被包围 EMT 和配偶说哦，嘿，我 有你的啤酒。

这正是您坚持进行同步服务器调用时发生的情况。

Answer 8

我认为你需要做的就是在你的代码中包含这个：

async: false,

所以你的 Ajax 调用看起来像这样：

jQuery.ajax({
            type: "GET",
            url: "something.html for example",
            dataType: "html",
            async: false,
            context: document.body,
            success: function(response){

                //do stuff here

            },
            error: function() {
                alert("Sorry, The requested property could not be found.");
            }  
        });

显然其中一些需要更改为XML、JSON 等，但async: false, 是这里的主要点，它告诉 JS 引擎等到成功调用返回（或失败取决于）然后携带在。 请记住，这样做有一个缺点，那就是整个页面变得无响应，直到 ajax 返回！！！通常在几毫秒内，这不是什么大问题，但可能需要更长的时间。

希望这是正确的答案，它可以帮助你:)

Answer 9

处理所有异步请求的最佳解决方案之一是'Promise'。
Promise 对象表示异步操作的最终完成（或失败）。

示例：

let myFirstPromise = new Promise((resolve, reject) => {
  // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.
  // In this example, we use setTimeout(...) to simulate async code. 
  // In reality, you will probably be using something like XHR or an HTML5 API.
  setTimeout(function(){
    resolve("Success!"); // Yay! Everything went well!
  }, 250);
});  

myFirstPromise.then((successMessage) => {
  // successMessage is whatever we passed in the resolve(...) function above.
  // It doesn't have to be a string, but if it is only a succeed message, it probably will be.
  console.log("Yay! " + successMessage);
});

Promise

如果您有 3 个异步函数并希望按顺序运行，请执行以下操作：

let FirstPromise = new Promise((resolve, reject) => {
    FirstPromise.resolve("First!");
});
let SecondPromise = new Promise((resolve, reject) => {

});
let ThirdPromise = new Promise((resolve, reject) => {

});
FirstPromise.then((successMessage) => {
  jQuery.ajax({
    type: "type",
    url: "url",
    success: function(response){
        console.log("First! ");
        SecondPromise.resolve("Second!");
    },
    error: function() {
        //handle your error
    }  
  });           
});
SecondPromise.then((successMessage) => {
  jQuery.ajax({
    type: "type",
    url: "url",
    success: function(response){
        console.log("Second! ");
        ThirdPromise.resolve("Third!");
    },
    error: function() {
       //handle your error
    }  
  });    
});
ThirdPromise.then((successMessage) => {
  jQuery.ajax({
    type: "type",
    url: "url",
    success: function(response){
        console.log("Third! ");
    },
    error: function() {
        //handle your error
    }  
  });  
});

使用这种方法，您可以随心所欲地处理所有异步操作。