How to delay 5 seconds in JavaScript

Question

I have JavaScript function:

function validateAddToCartForm(object) {
   value = $(".product-detail-qty-box").val();
   if(!isInt(value) || value < 1) {
           $(".product-detail-error").show();
           return false;
   } else {
           $(".product-detail-error").hide();

           var product_name = $("#product_detail_name").text();
           var NewDialog = $('<div id="MenuDialog">\ ' + product_name + '</div>');
       NewDialog.dialog({            
           modal: true,
           title: "title",
           show: 'clip',
           hide: {effect: "fadeOut", duration: 1000}
       });

   }
   return true;
}

I need to pause 3 to 5 seconds before returning true, because I want to show a New Dialog box for a while. How can I implement this delay?

Possible duplicate http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop — Santosh, Apr 29 '13 at 04:58
http://stackoverflow.com/questions/5722791/wait-or-sleep-function-in-jquery — İsmet Alkan, Apr 29 '13 at 04:59
I call validateAddToCartForm method from Dialog. The main dialog will exit when return true. I want to show sub dialog for a while before main dialog is closed. That why I want to delay for a while to remain main dialog. — Kre Toni, Apr 29 '13 at 05:02

zb' · Answer 1 · 2013-04-29T07:35:22.717

The only way to simulate delay in js is callback on timeout.

change the function to:

function validateAddToCartForm(object,callback) {
   value = $(".product-detail-qty-box").val();
   if(!isInt(value) || value < 1) {
           $(".product-detail-error").show();
           callback(false);
   } else {
           $(".product-detail-error").hide();

           var product_name = $("#product_detail_name").text();
           var NewDialog = $('<div id="MenuDialog">\ ' + product_name + '</div>');
       NewDialog.dialog({            
           modal: true,
           title: "title",
           show: 'clip',
           hide: {effect: "fadeOut", duration: 1000}
       });

   }
   setTimeout(function() {callback(true);},5000);
}

where you call it you should do something like:

instead of

function somefunct() {
    //code before call
    if (validateAddToCartForm(object)) {
       //process true
    } else {
       //process false
    }
    //rest of the function 
}

place something like:

function somefunct() {
    //code before call
   validateAddToCartForm(object,function(ret) {
    {
     if (ret) {
        //process true
     } else {
        //process false
     }       
    //rest of the function 
    }
}

In to answer to your comment. I assume:

that you want to prevent click event if validate false,
that all elements that you added onclick="..." have class ".clickme",

the element now looks like

 <input type="submit" onclick="return validateAddToCartForm(this)" class="clickme" />

so 1st change the element to

<input type="submit" class="clickme" />

add to your javascript the following:

//this handle original click, drop it out, and only pass after validation
$(function () {
    $('.clickme').click(function (e) {
        var $t = $(this);
        //if event triggered return true        
        if (e.isTrigger) return true;
        validateAddToCartForm(this, function (ret) {
            if (ret) {
                $t.trigger('click');
            }
        });
        return false;
    });
});

also I suggest to use "submit" event on the form itself instead of "click" (the demo of submit)

Thanks. I call the function in onclick="return validateAddToCartForm(this);". So how shall I call your method in onlick. — Kre Toni, Apr 29 '13 at 06:30
oh.... this is about form ? I will place to answer, you should not do `onclick="";` with jquery — zb', Apr 29 '13 at 06:40

score 0 · Answer 2 · 2013-04-29T05:42:51.297

Instead of blocking, you can use seTimeout to remove the #MenuDialog after a certain time.

function validateAddToCartForm(o){
  var keep_dialog_time = 5 * 1000; // five seconds.
  // Whatever...

  /* Use setTimeout(function, milliseconds) to delay deletion of #MenuDialog.
     This will get executed keep_dialog_time milliseconds after this call, and
     won't block. */
  setTimeout(function(){
    $('#MenuDialog').hide(); // maybe there is another function to do this, I'm not a jQuery guy really.
  }, keep_dialog_time);
  return true;
}

JavaScript is single threaded. This means, when you block, you block the everything. Thus, the DOM uses an event loop model, where callbacks are assigned to events. Such a model is also present in node.js too. Above, because setTimeout does not block, code after that call will continue to run without waiting the function we passed to setTimeout to get executed.

I'd suggest to study DOM in depth to get more comfortable with web front-end programming. You may use various search engines to find out cool documentation.

OP wrote *Currently I need to suspend or delay 3 or 5 seconds before return true.* do you get it in your code ? — zb', Apr 29 '13 at 05:53
@eicto I believe he wants to show the dialog for a while (quoting OP: *...Because I want to show New Dialog for a while...*). This code should do this. — , Apr 29 '13 at 06:02
it is not clean which dialog he want to show for a while :) but anyway, if he want to close it after timeout it should be called as `NewDialog.dialog('close');` — zb', Apr 29 '13 at 06:06

How to delay 5 seconds in JavaScript

2 Answers2