blocks|key|1276757|text|出现这个问题是因为AJAX本质上是异步的。这意味着updateStatus()调用确实是按顺序执行的，但会立即返回，并且JS解释器在从AJAX请求检索任何数据之前到达hideLoader()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1276758|您应该在AJAX调用完成的事件上执行hideLoader()。|1276759|entityMap^0|P|E|2B|C|0|I|C|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

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

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

blocks|key|1276841|text|这与代码的执行顺序无关。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1276842|加载器图像从不显示的原因是，当您的函数运行时，UI不会更新。如果在UI中进行更改，则在退出函数并将控制权返回给浏览器之前，这些更改不会出现。|1276843|您可以在设置图像后使用超时，使浏览器有机会在启动其余代码之前更新UI：|1276844|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);
}|code-block|syntax|javascript|1276845|还有另一个因素也会使你的代码看起来不按顺序执行。如果AJAX请求是异步的，则该函数不会等待响应。负责处理响应的函数将在浏览器接收到响应时运行。如果您希望在收到响应后隐藏加载程序映像，则必须在最后一个响应处理函数运行时执行此操作。由于响应不必按照您发送请求的顺序到达，因此当最后一个响应到达时，您需要计算您得到了多少响应。|1276846|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

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.

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

<pre><code>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);
}
</code></pre>

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.

blocks|key|1062215|text|安装Firebug，然后在showLoader、updateStatus和hideLoader中各添加一行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1062216|Console.log("event+logged");|code-block|syntax|javascript|1062217|您将看到控制台窗口中列出了对您的函数的调用，并且它们将按顺序排列。问题是，你的"updateStatus“方法是做什么的？|1062218|假设它启动一个后台任务，然后返回，因此您将在任何后台任务完成之前到达对hideLoader的调用。您的Ajax库可能有一个"OnComplete“或"OnFinished”回调-从那里调用以下updateStatus。|1062219|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

<pre><code>Console.log("event logged");
</code></pre>

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?

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.

blocks|key|1276954|text|我们在我们的一个项目中有类似的东西，我们通过使用计数器解决了它。如果您在AJAX请求的响应函数中为每个updateStatus调用增加计数器并减少它(取决于您正在使用的AJAX+JavaScript库)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1276955|一旦计数器达到零，所有AJAX请求都完成，您就可以调用hideLoader()了。|1276956|下面是一个示例：|1276957|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%2B%2B;

++++//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
}|code-block|syntax|javascript|1276958|entityMap^0|1F|C|0|R|C|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|X|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

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 <code>updateStatus</code> and decrease it in the AJAX request's response function (depends on the AJAX JavaScript library you're using.) 

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

Here's a sample:

<pre><code>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 &lt;= 0)
 hideLoader(); //hide the 'loader.gif' in the UI
}
</code></pre>

blocks|key|1062317|text|将updateStatus调用移动到另一个函数。使用新函数作为目标调用setTimeout。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1062318|如果您的ajax请求是异步的，那么您应该有一些东西来跟踪哪些请求已经完成。每个回调方法都可以在某个地方为自己设置一个“完成”标志，并检查它是否是最后一个这样做的方法。如果是，那么让它调用hideLoader。|1062319|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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

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.

blocks|key|1062379|text|我认为你所需要做的就是在你的代码中包含以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1062380|async:+false,|code-block|syntax|javascript|1062381|因此，您的Ajax调用将如下所示：|1062382|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.");
++++++++++++}++
++++++++});|1062383|显然，需要对XML、JSON等进行一些更改，但async:+false,是这里的主要内容，它告诉JS引擎等待成功的调用返回(或失败)，然后继续执行。记住，这有一个缺点，那就是在ajax返回之前，整个页面都会变得没有响应！通常在毫秒内，这不是一个大的交易，但可能需要更长的时间。|offset|length|style|CODE|1062384|希望这是正确的答案，它对您有帮助:)|1062385|entityMap^0|0|0|0|0|6|3|A|4|N|D|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@$M|Z|N|10|O|P]|$M|11|N|12|O|P]|$M|13|N|14|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|T|$]]

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

<pre><code>async: false,
</code></pre>

So your Ajax call would look like this:

<pre><code>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.");
 } 
 });
</code></pre>

Obviously some of this need to change for <code>XML</code>, <code>JSON</code> etc but the <code>async: false,</code> 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.

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

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.

I have a function:

<pre><code>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

}
</code></pre>

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.

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...

How do you make javascript code execute *in order*

解释器

jQuery

JSON

好吧，我很欣赏Javascript不是C#或PHP，但我总是回到Javascript的一个问题上--不是JS本身，而是我对它的使用。我有一个函数：function updateStatuses(){showLoader() //show the 'loader.gif' in the UIupdateStatus('c...

问如何让javascript代码按顺序执行*？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让javascript代码按顺序执行*？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让javascript代码按顺序执行*？
EN