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

How do you make javascript code execute *in order*

提问by Ed.

Okay, so I appreciate that Javascript is not C# or PHP, but I keep coming back to an issue in Javascript - not with JS itself but my use of it.

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

I have a function:

我有一个功能：

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

}

Thing is, owing to Javascript's burning desire to jump ahead in the code, the loader never appears because the 'hideLoader' function runs straight after.

事实是，由于 Javascript 迫切希望在代码中跳转，加载器永远不会出现，因为 'hideLoader' 函数会在之后直接运行。

How can I fix this? Or in other words, how can I make a javascript function execute in the order I write it on the page...

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

回答by anorm

The problem occurs because AJAX is in its nature asynchronus. This means that the updateStatus()calls are indeed executed in order but returns immediatly and the JS interpreter reaches hideLoader()before any data is retreived from the AJAX requests.

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

You should perform the hideLoader()on an event where the AJAX calls are finished.

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

回答by meagar

You need to think of JavaScript as event based rather than procedural if you're doing AJAX programming. You have to wait until the first call completes before executing the second. The way to do that is to bind the second call to a callback that fires when the first is finished. Without knowing more about the inner workings of your AJAX library (hopefully you're using a library) I can't tell you how to do this, but it will probably look something like this:

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

showLoader();

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

The idea is, updateStatustakes its normal argument, plus a callback function to execute when it's finished. It's a reasonably common pattern to pass a function to run onCompleteinto a function which provides such a hook.

这个想法是，updateStatus采用它的正常参数，加上一个回调函数，在它完成时执行。传递一个函数以运行onComplete到提供这种钩子的函数是一种相当常见的模式。

Update

更新

If you're using jQuery, you can read up on $.ajax()here: http://api.jquery.com/jQuery.ajax/

如果你使用 jQuery，你可以在$.ajax()这里阅读：http: //api.jquery.com/jQuery.ajax/

Your code probably looks something like this:

您的代码可能如下所示：

function updateStatus(arg) {
  // processing

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

  // processing
}

You can modify your functions to take a callback as their second parameter with something like this:

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

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

}

}

回答by Amir

I thinks all you need to do is have this in your code:

我认为您需要做的就是在代码中包含以下内容：

async: false,

So your Ajax call would look like this:

所以你的 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.");
            }  
        });

Obviously some of this need to change for XML, JSONetc but the async: false,is the main point here which tell the JS engine to wait until the success call have returned (or failed depending) and then carry on. Remember there is a downside to this, and thats that the entire page becomes unresponsive until the ajax returns!!! usually within milliseconds which is not a big deals but COULD take longer.

显然，一些这方面需要改变XML，JSON等等，但async: false,这里的要点，告诉JS引擎要等到成功的呼叫已恢复（或视失败）再进行。请记住，这样做有一个缺点，那就是整个页面在 ajax 返回之前都没有响应！！！通常在几毫秒内，这不是什么大问题，但可能需要更长的时间。

Hope this is the right answer and it helps you :)

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

回答by Prutswonder

We have something similar in one of our projects, and we solved it by using a counter. If you increase the counter for each call to updateStatusand decrease it in the AJAX request's response function (depends on the AJAX JavaScript library you're using.)

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

Once the counter reaches zero, all AJAX requests are completed and you can call hideLoader().

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

Here's a sample:

这是一个示例：

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
}

回答by Guffa

This has nothing to do with the execution order of the code.

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

The reason that the loader image never shows, is that the UI doesn't update while your function is running. If you do changes in the UI, they don't appear until you exit the function and return control to the browser.

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

You can use a timeout after setting the image, giving the browser a chance to update the UI before starting rest of the code:

您可以在设置图像后使用超时，让浏览器有机会在开始其余代码之前更新 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);
}

There is another factor that also can make your code appear to execute out of order. If your AJAX requests are asynchronous, the function won't wait for the responses. The function that takes care of the response will run when the browser receives the response. If you want to hide the loader image after the response has been received, you would have to do that when the last response handler function runs. As the responses doesn't have to arrive in the order that you sent the requests, you would need to count how many responses you got to know when the last one comes.

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

回答by Douglas

Install Firebug, then add a line like this to each of showLoader, updateStatus and hideLoader:

安装 Firebug，然后在 showLoader、updateStatus 和 hideLoader 中添加如下一行：

Console.log("event logged");

You'll see listed in the console window the calls to your function, and they will be in order. The question, is what does your "updateStatus" method do?

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

Presumably it starts a background task, then returns, so you will reach the call to hideLoader before any of the background tasks finish. Your Ajax library probably has an "OnComplete" or "OnFinished" callback - call the following updateStatus from there.

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

回答by Sripathi Krishnan

As others have pointed out, you don't want to do a synchronous operation. Embrace Async, that's what the A in AJAX stands for.

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

I would just like to mention an excellent analogy on sync v/s async. You can read the entire post on the GWT forum, I am just including the relevant analogies.

我只想提一个关于同步与异步的极好类比。你可以在 GWT 论坛上阅读整篇文章，我只是包括相关的类比。

Imagine if you will ...

You are sitting on the couch watching TV, and knowing that you are out of beer, you ask your spouse to please run down to the liquor store and fetch you some. As soon as you see your spouse walk out the front door, you get up off the couch and trundle into the kitchen and open the fridge. To your surprise, there is no beer!

Well of course there is no beer, your spouse is still on the trip to the liquor store. You've gotta wait until [s]he returns before you can expect to have a beer.

想象一下，如果你...

你坐在沙发上看电视，知道你没有啤酒了，你让你的配偶跑到酒类商店给你拿一些。一旦你看到你的配偶走出前门，你就会从沙发上站起来，走进厨房，打开冰箱。令您惊讶的是，这里没有啤酒！

嗯，当然没有啤酒，你的配偶还在去酒类商店的路上。你必须等到[她]回来才能喝啤酒。

But, you say you want it synchronous? Imagine again ...

但是，你说你想要它同步？再想想……

... spouse walks out the door ... now, the entire world around you stops, you don't get to breath, answer the door, or finish watching your show while [s]he runs across town to fetch your beer. You just get to sit there not moving a muscle, and turning blue until you lose consciousness ... waking up some indefinite time later surrounded by EMTs and a spouse saying oh, hey, I got your beer.

......配偶走出门......现在，你周围的整个世界都停止了，当他跑过城镇去取啤酒时，你无法呼吸，回答门或看完你的节目。你只是坐在那里不动肌肉，然后脸色发青，直到你失去知觉……在不确定的一段时间后醒来，周围都是 EMT 和配偶说哦，嘿，我喝了你的啤酒。

That's exactly what happens when you insist on doing a synchronous server call.

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

回答by lincolnk

move the updateStatus calls to another function. make a call setTimeout with the new function as a target.

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

if your ajax requests are asynchronous, you should have something to track which ones have completed. each callback method can set a "completed" flag somewhere for itself, and check to see if it's the last one to do so. if it is, then have it call hideLoader.

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

回答by Iman Bahrampour

One of the best solutions for handling all async requests is the 'Promise'.
The Promise object represents the eventual completion (or failure) of an asynchronous operation.

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

Example:

例子：

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

承诺

If you have 3 async functions and expect to run in order, do as follows:

如果您有 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
    }  
  });  
});

With this approach, you can handle all async operation as you wish.

使用这种方法，您可以根据需要处理所有异步操作。