jquery delay the execution of code

Question

In my jquery function I have a loader gif image. After I show it I want to put a delay for a second and then continue to execute the rest of the code. How can I do that?

    $('#loader').css('display', '');

    //// I want to put here a delay. 

    var myDate = new Date();
    myDate.setFullYear(2013,8,2);

    var checkyear = myDate.getFullYear();
    var monthly =myDate.getMonth();
    var daily =myDate.getDate();

    $('#day').html(daily) ;
    $('#month').html(months[monthly]) ;
    $('#year').html(checkyear) ;

check this answer out, http://stackoverflow.com/questions/1183872/put-a-delay-in-javascript — zahirdhada, Sep 26 '13 at 11:35
Please use the search functionality on stackoverflow next time before you post a question that has been asked (and answered) like a zillion times — devnull69, Sep 26 '13 at 11:38

score 34 · Accepted Answer · answered Sep 26 '13 at 11:34

34

Set a timeout like this :

var delay = 1000;
setTimeout(function() {
 // your code
}, delay);

Example http://jsfiddle.net/HuLTs/

answered Sep 26 '13 at 11:34

Paul Rad

4,820
1
22
23

No problem on Chrome for me. Create a new topic with your question. – Paul Rad Oct 15 '15 at 16:01

GG. · Answer 2 · 2013-09-26T11:41:54.357

7

Have you tried .delay ?

$('#loader').show(1).delay(1000).hide(1);

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Demo : http://jsfiddle.net/SBrWa/

edited Sep 26 '13 at 11:41

answered Sep 26 '13 at 11:35

GG.

21,083
14
84
130

2

`$('#loader').show().delay(1000).hide(0);` would be enough ;) +1 for showing alternative. Just as an inside, DOC concerning delay() seems no more to be accurate. Looks like a delay() can be canceled using jq 1.9 method .finish() – A. Wolff Sep 26 '13 at 11:42

score 6 · Answer 3 · answered Sep 26 '13 at 11:36

6

$(document).ready(function(){ 
    setTimeout(function(){ 
      //your code
     },
  2000); 
});

Here 2000 refers to 2 seconds

answered Sep 26 '13 at 11:36

coder

13,002
31
112
214

score 0 · Answer 4 · answered Sep 26 '13 at 11:37

You can use this code,

$('#loader').css('display', '');

setTimeout(function() {
    var myDate = new Date();
    myDate.setFullYear(2013,8,2);

    var checkyear = myDate.getFullYear();
    var monthly =myDate.getMonth();
    var daily =myDate.getDate();

    $('#day').html(daily) ;
    $('#month').html(months[monthly]) ;
    $('#year').html(checkyear) ;
}, 1000);

score 0 · Answer 5 · answered Sep 26 '13 at 11:37

Try this,

$(function(){
    $('#loader').css('display', '');
    setTimeout(function(){ 
        var myDate = new Date();
        myDate.setFullYear(2013,8,2);
        var checkyear = myDate.getFullYear();
        var monthly =myDate.getMonth();
        var daily =myDate.getDate();
        $('#day').html(daily) ;
        $('#month').html(months[monthly]) ;
        $('#year').html(checkyear) ;
    },1000);// 1 second delay
});

jquery delay the execution of code

5 Answers5