异步ajax调用和javascript代码

Asynchronize ajax calls and javascript code

本文关键字：javascript 代码 调用 ajax 异步      更新时间：2023-09-26

我有一个特定的脚本，它由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:忙/gh>
    • CPU:什么都不做
  2. 接收ajax呼叫1 &&开始doStuff 1
    • Ajax:什么都不做
      • <
    • CPU:忙/gh>
  3. 完成doStuff 1 &&发送ajax呼叫2
      <
    • Ajax:忙/gh>
    • CPU:什么都不做
  4. 接收ajax调用2 &&开始doStuff 2
    • Ajax:什么都不做
      • <
    • CPU:忙/gh>
  5. …

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

  1. 发送ajax呼叫1
      <
    • Ajax:忙/gh>
    • CPU:什么都不做
  2. 接收ajax呼叫1 &&发送ajax调用2 &&开始doStuff 1
      <
    • Ajax:忙/gh><
    • CPU:忙/gh>
  3. 完成ajax调用2
    • Ajax:什么都不做
      • <
    • CPU:忙/gh>
  4. 完成doStuff &&发送ajax调用3 &开始doStuff 2
      <
    • Ajax:忙/gh><
    • CPU:忙/gh>
  5. 完成ajax调用
    • Ajax:什么都不做
      • <
    • CPU:忙/gh>
  6. 完成doStuff 2 &&发送ajax调用4 &&开始doStuff 3
      <
    • Ajax:忙/gh><
    • CPU:忙/gh>
  7. …

我想要这个:

  1. 发送ajax呼叫1
      <
    • Ajax:忙/gh>
    • CPU:什么都不做
  2. 接收ajax呼叫1 &&发送ajax调用2 &&开始doStuff 1
      <
    • Ajax:忙/gh><
    • CPU:忙/gh>
  3. 完成ajax调用2 &&发送ajax呼叫3
      <
    • Ajax:忙/gh><
    • CPU:忙/gh>
  4. 完成doStuff 1 &&开始doStuff 2
      <
    • Ajax:忙/gh><
    • CPU:忙/gh>
    5. 完成ajax调用3 &&发送ajax呼叫4
      <
    • Ajax:忙/gh><
    • CPU:忙/gh>
  5. 完成doStuff 2 &&开始doStuff 3
      <
    • Ajax:忙/gh><
    • CPU:忙/gh>
  6. …

这是不调用下一个ajax调用一旦第一个已经完成!它在等待完成后调用下一个ajax调用。要在第一次调用完成后调用下一个ajax调用，应该在ajax调用的回调函数中进行。根据定义，Ajax调用是异步的，因此您可以按顺序调用任意数量的调用，而不必相互等待。

下面是一个jquery的例子(只是为了让它更容易读懂):

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

上面的两个ajax调用将一个接一个地执行，它们不会等待对方。如果你想让第二个等待第一个，你可以这样做:

$.get("your/url", function(){
      $.get("another/url");
});
相关文章：