how to execute jquery code one by one? I want first do "function 1", when finish the job. then do "function 2"...

Thanks.

<script type="text/javascript">
jQuery(document).ready(function(){
  $(document).ready(function(){ 
    //function 2, jqeury.ajax  
  });  
  $(document).ready(function(){ 
    //function 3, jqeury.json 
  });  
  $('#col').load("home.html"); 
    //function 4, jqeury.load
  });  
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
  //function 1,  a jquery slider plungin
});
</script>

how to execute jquery code one by one? I want first do "function 1", when finish the job. then do "function 2"...

Thanks.

<script type="text/javascript">
jQuery(document).ready(function(){
  $(document).ready(function(){ 
    //function 2, jqeury.ajax  
  });  
  $(document).ready(function(){ 
    //function 3, jqeury.json 
  });  
  $('#col').load("home.html"); 
    //function 4, jqeury.load
  });  
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
  //function 1,  a jquery slider plungin
});
</script>

• javascript
• jquery

• Can you give us more code and leave out the multiple document ready functions, you won't have to listen for doc ready more than once. So keep the parent document ready and show us the guts of function 2 and 3, usually when you have anonymous jquery functions like that, you can call the next function in line with a ma after the function call. – Tim Joyce Commented Jun 7, 2011 at 12:21
• Everything will run in order one thing at a time by default, unless specified otherwise - such as asynchronously loading ajax. – 472084 Commented Jun 7, 2011 at 12:22
• Possible duplicate: stackoverflow./questions/6251228/… – marcosfromero Commented Jun 7, 2011 at 12:23
• 1 if you are using Jquery 1.5 and above then you can use .when and .then (Deferred Objects) api.jquery./category/deferred-object – Raja Commented Jun 7, 2011 at 12:36

5 Answers 5

You don't need so many document ready calls. One will suffice

If you mean you want to call each method after one has received the response from the AJAX calls you are making, put the code in the callback;

$(document).ready(function(){
    one(); //call the initial method
});

function one(){
   $.get('url', {}, function(data){
      two(); //call two() on callback
   })
}

function two(){
   $.getJSON('url', {}, function(data){
       three(); //ditto
   })
}

function three(){
   $('#selector').load('url');
}

The docs

http://api.jquery./jQuery.get/

http://api.jquery./jQuery.getJSON/

http://api.jquery./load/

Instead of using more than one document.ready() use callback functions as below.

<script type="text/javascript">
function ajaxfun() {
    //function 2, jqeury.ajax  
    //in ajax callback call the jsonfun();
}  
function jsonfun(){ 
    //function 3, jqeury.json 
    //after json function add the next function in it callback.
}  
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
  //function 1,  a jquery slider plungin
  //Call ajaxfun() here to execute second.
});
</script>

It looks like you are doing three ajax calls. Since jQuery 1.5, we now have a Deferred object (technically a jqXHR object) returned from ajax calls, so you can chain them like this:

$(function() { // this is a document ready function.  it's all you need.
    $.ajax(/* your ajax specs */).done(function() {
        $.getJSON('somepath').done(function() {
            $('#container').load('etc.');
        });
    });
});

use setTimeout function

function f1(para) {
  // ...
  // do work;
  setTimeout(f2, 10);
}

function f2() {
  // ...
  // do work
  setTimeout(f3, 10);
}

<script type="text/javascript">

jQuery(document).ready(function(){
  function2(){  //declare what function 2 will do here
    //function 2, jqeury.ajax  
  } 
  function3(){ 
    //function 3, jqeury.json 
  }  
  $('#col').load("home.html"); 
    //function 4, jqeury.load
  });  
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
  //function 1,  a jquery slider plungin

  function2(); // execute function 2 after 1
  function3();
});
</script>