javascript - how to execute jquery code one by one? - Stack Overflow

admin管理员组

文章数量:1356536

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

Share Improve this question Follow edited Jun 7, 2011 at 12:20 Arief 6,08577 gold badges3939 silver badges4141 bronze badges asked Jun 7, 2011 at 12:16 fish manfish man 2,7202121 gold badges5555 silver badges9494 bronze badges 4

• 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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 9

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>

本文标签： javascripthow to execute jquery code one by oneStack Overflow