异步ajax调用和javascript代码

时间:2014-03-16 13:08:15

标签: javascript ajax

我有一个由ajax调用组成的特定脚本,并且使用来自ajax调用的数据来计算某些东西。基本上有两个部分:一个较小的部分,有很多代码和一些ajax调用;还有一个更大的第二部分,代码更少,但是有很多ajax调用。这是简化的'我的脚本版本:

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调用,我可以相对看到完成这需要多长时间:

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

现在,我认为这个脚本的速度可能是原来的两倍,因为CPU在等待ajax调用时什么都不做。当CPU正在工作时,可以调用ajax调用。

所以我已经做了一些改进,我用doStuff交换了ajax调用:

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调用。

有没有办法让这两部分(ajax调用/处理代码)有点异步?我想继续发送和接收不必等待代码完成的ajax调用。在第二个计算机必须等待ajax调用返回,他使用该时间来处理某些代码,并且当调用到达时,他中断代码片刻以发送下一个代码。我的目标是在每个给定的时刻,路上都有一个ajax调用,我的CPU很忙,或者其中一个完全完成。

更多解释:

在第一个例子中,工作方案是这样的:

  1. 发送ajax电话1
    • Ajax:忙碌
    • CPU:什么都不做
  2. 接收ajax电话1&amp;&amp;启动doStuff 1
    • Ajax:什么都不做
    • CPU:忙碌
  3. 完成doStuff 1&amp;&amp;发送ajax电话2
    • Ajax:忙碌
    • CPU:什么都不做
  4. 接收ajax电话2&amp;&amp;启动doStuff 2
    • Ajax:什么都不做
    • CPU:忙碌
  5. ...
  6. 在第二个例子中,工作方案是:

    1. 发送ajax电话1
      • Ajax:忙碌
      • CPU:什么都不做
    2. 接收ajax电话1&amp;&amp;发送ajax电话2&amp;&amp;启动doStuff 1
      • Ajax:忙碌
      • CPU:忙碌
    3. 完成ajax调用2
      • Ajax:什么都不做
      • CPU:忙碌
    4. 完成doStuff&amp;&amp;发送ajax电话3&amp;&amp;启动doStuff 2
      • Ajax:忙碌
      • CPU:忙碌
    5. 完成ajax调用3
      • Ajax:什么都不做
      • CPU:忙碌
    6. 完成doStuff 2&amp;&amp;发送ajax电话4&amp;&amp;启动doStuff 3
      • Ajax:忙碌
      • CPU:忙碌
    7. ...
    8. 我想要这个:

      1. 发送ajax电话1
        • Ajax:忙碌
        • CPU:什么都不做
      2. 接收ajax电话1&amp;&amp;发送ajax电话2&amp;&amp;启动doStuff 1
        • Ajax:忙碌
        • CPU:忙碌
      3. 完成ajax call 2&amp;&amp;发送ajax电话3
        • Ajax:忙碌
        • CPU:忙碌
      4. 完成doStuff 1&amp;&amp;启动doStuff 2
        • Ajax:忙碌
        • CPU:忙碌
      5. 完成ajax call 3&amp;&amp;发送ajax电话4
        • Ajax:忙碌
        • CPU:忙碌
      6. 完成doStuff 2&amp;&amp;启动doStuff 3
        • Ajax:忙碌
        • CPU:忙碌
      7. ...

1 个答案:

答案 0 :(得分:0)

XiozZe一旦第一次完成,就不会调用下一个ajax调用!它在等待完成后调用下一个ajax调用。要在第一次打开完成后调用下一个ajax调用,你应该在ajax调用的回调函数中执行它。根据定义,Ajax调用是异步的,因此您可以根据需要按顺序调用它们,并且它们不必相互等待。

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

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

上面这两个ajax调用将一个接一个地执行,他们不会互相等待。如果你想让第二个等待第一个,你可以这样做:

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