jquery firing actions after document ready

Question

I need to perform this step:-

When document is ready,
do function A,
After function A is completed,
perform function B, C, D

Though not exactly the answer, the following way works:-

<script>
$(document).ready(function(){
    function_a();
    setTimeout(function(){
        function_b(); 
        function_c();
        function_d();
    }, 100);
});
</script>

Surely, I cannot always depend on time delay! However, the following way is not working:-

<script>
$(document).ready(function(){
    function_a();
}).complete(function(){
    function_b(); 
    function_c();
    function_d();
});
</script>

How can the second way be improved?

Are your functions asynchronous ? Then they certainly accept a callback as paremeter, don't they ? — Denys Séguret, Jun 04 '13 at 07:55
the functions must be worked out step by step, otherwise the final effect will be incorrect. — user2122657, Jun 04 '13 at 07:57

score 1 · Answer 1 · answered Jun 04 '13 at 07:56

1

function_a();

function function_a()
{
 ........
 function_b();
}

function function_b()
{
 ........
 function_c();
}

function function_c()
{
  ........
 function_d();
}

answered Jun 04 '13 at 07:56

PSR

39,804
41
111
151

only if all are synchronous. – Cris Jun 04 '13 at 07:57

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

$(document).ready(function(){
    function_a();
    function_b(); 
    function_c();
    function_d();

});

Will do the same if functions are synchronous.
For Asynchronus functions use callbacks.
This might help : How should I call 3 functions in order to execute them one after the other?

edited May 23 '17 at 11:57

Community

1
1

answered Jun 04 '13 at 07:56

Ajinkya

22,324
33
110
161

will not work if function function_a() has asynchronous actions – Cris Jun 04 '13 at 07:57
@Cris: Was about to mention it. Thanks! – Ajinkya Jun 04 '13 at 07:58

score 1 · Answer 3 · answered Jun 04 '13 at 07:58

1

You could just do with below if function_a works synchronous.

$(document).ready(function(){
    function_a();
    function_b(); 
    function_c();
    function_d();
});

But if it works asynchronous, then function_a should provide a parameter for complete callback:

$(document).ready(function(){
    function_a(function(){
      function_b(); 
      function_c();
      function_d();
    });
});

answered Jun 04 '13 at 07:58

xdazz

158,678
38
247
274

**+1** and it's good idea to write `function_a` and how it accept a callback for making this answer better `;)`. – Jun 04 '13 at 08:30

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

If you want to functions follow the that sequence you have to impelled Deferred. Read about jQuery .when(), .then(). jQuery is made for this.

How can jQuery deferred be used?

http://learn.jquery.com/code-organization/deferreds/examples/

or

function_a();
function_b(); 
function_c();
function_d();

Above method is also correct. But this method won't work if function_a() has asynchronous functions.

jquery firing actions after document ready

4 Answers4

or