异步ajax调用和javascript代码 [英] Asynchronize ajax calls and javascript code

问题描述

我有一个由ajax调用组成的特定脚本，其功能是使用ajax调用中的数据来计算内容.基本上有两个部分:一个较小的部分，其中包含大量的代码和一些ajax调用；第二部分更大，它具有较少的代码，但是有许多ajax调用.这是脚本的简化"版本:

I have a certain script that consists of ajax calls, and functions the use the data from the ajax calls to calculate something. There are basically two parts: a smaller part one, that has lot's of code and a few ajax calls; and a bigger part two, that has less code, but lots of ajax calls. Here is the 'simplified' version of my script:

function doStuff(i, moreWork){
    var max = 20000*Math.random() + (200000+100000*Math.random())*moreWork;
    for(var j = 0; j < max; j++){
        $("#hello").text();
    }
}

function ajaxCall(i, url){
    if(i === 40){
        return false;
    } 

    $.get(url, function(data){            
        url = $(data).find("#url").attr("href");
        if(i < 10){
            //The first few calls cause a lot of work
            doStuff(i, 1);        
        }
        else{
            //The others are much faster done
            doStuff(i, 0);
        }     
        ajaxCall(++i, url);
    });
}

var url = "www.example.com"
ajaxCall(0, url);

如果我更改超时中的ajax调用，我可以相对地看到它需要多长时间:

If I change the ajax calls in timeouts, I can relatively see how long this takes to complete:

http://jsfiddle.net/XiozZe/KfW93/

现在，我认为这个脚本的运行速度可能是以前的两倍，因为当他等待ajax调用时，CPU却什么也不做.在CPU工作时，可以调用ajax调用.

Now, I think this script could be twice as fast, because the CPU is doing nothing, when he is waiting for the ajax calls. And while the CPU is doing work, there are ajax calls that can be called.

所以我已经做了些微的改进，我将ajax调用换成了doStuff:

So I already did a slight improvement, I swapped the ajax call with the doStuff:

function doStuff(i, moreWork){
    var max = 20000*Math.random() + (200000+100000*Math.random())*moreWork;
    for(var j = 0; j < max; j++){
        $("#hello").text();
    }
}

function ajaxCall(i, url){
    if(i === 40){
        return false;
    } 

    $.get(url, function(data){            
        url = $(data).find("#url").attr("href");
        ajaxCall(++i, url);
        if(i < 10){
            //The first few calls cause a lot of work
            doStuff(i, 1);        
        }
        else{
            //The others are much faster done
            doStuff(i, 0);
        }     
    });
}

var url = "www.example.com"
ajaxCall(0, url);

http://jsfiddle.net/XiozZe/KfW93/3/

这样，脚本在第一个ajax调用完成后立即发送第二个ajax调用，然后从代码开始.在第一个代码和第二个ajax调用完成之后发送第三个ajax调用.

This way, the script sends the second ajax call immediately after the first one was finished, and then begins with the code. The third ajax call is send after the first code and the second ajax call has finished.

有没有办法使这两个部分(ajax调用/在代码上工作)有点异步?我想继续发送和接收不必等待代码完成的ajax调用.在第二秒中，计算机必须等待ajax调用回来，他利用这段时间来处理一些代码，当调用到达时，他会中断代码一会儿以发送下一个代码.我的目标是，在每个给定的时刻，都会有一个ajax调用，而我的CPU却很忙，或者其中的一个完全完成了.

Is there a way to make the two parts (ajax calls / work on code) sort of asynchronous? I want to keep sending and receiving ajax calls that don't have to wait for the code to finish. In the second the computer has to wait for the ajax call to come back, he uses that time to work on some code, and when the the call arrives, he interrupts the code for a moment to send the next one. My goal is that on every given moment, there is an ajax call on the way and my CPU is busy, or one of them is completely finished.

更多说明:

在第一个示例中，工作方案是这样的:

In the first example, the work scheme is this:

1. 发送ajax呼叫1
   • Ajax:忙
   • CPU:什么都不做

• Ajax:无所事事
• CPU:忙碌

• Ajax:忙
• CPU:什么都不做

• Ajax:无所事事
• CPU:忙碌

在第二个示例中，工作方案是这样的:

In the second example, the work scheme is this:

1. 发送ajax呼叫1
   • Ajax:忙
   • CPU:什么都不做

• Ajax:忙
• CPU:忙碌

• Ajax:无所事事
• CPU:忙碌

• Ajax:忙
• CPU:忙碌

• Ajax:无所事事
• CPU:忙碌

• Ajax:忙
• CPU:忙碌

我想要这个:

1. 发送ajax呼叫1
   • Ajax:忙
   • CPU:什么都不做

• Ajax:忙
• CPU:忙碌

• Ajax:忙
• CPU:忙碌

• Ajax:忙
• CPU:忙碌

• Ajax:忙
• CPU:忙碌

• Ajax:忙
• CPU:忙碌

推荐答案

XiozZe一旦第一个完成，就不会再调用下一个Ajax调用！等待完成后，它将调用下一个ajax调用.要在首次启动完成后调用下一个ajax调用，应在ajax调用的回调函数中执行此操作.根据定义，Ajax调用是异步的，因此您可以依次调用任意数量的调用，而不必彼此等待.

XiozZe this is not calling the next ajax call once the first has finished! It calls the next ajax call after the wait has finished. To call the next ajax call after the first on has finished you should do it in the callback function of your ajax call. Ajax calls are asynchronous by definition so you can call as many of them as you want in sequence and they won't have to wait for each other.

这是一个jquery示例(只是为了使其更具可读性):

Here is a jquery example (just to make it more readable):

$.get("your/url");
$.get("another/url");

上面的这两个ajax调用将一个接一个地执行，并且它们不会彼此等待.如果您希望第二个等待第一个，则可以执行以下操作:

These two ajax calls above will execute one after the other and they won't wait for each other. If you want the second one to wait for the first one you can do something like this:

$.get("your/url", function(){
      $.get("another/url");
});

这篇关于异步ajax调用和javascript代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！