How can I perform this JavaScript call after a delay time?

Question

I am pretty new in JavaScript and I have to perform an operation after some time that another previous operation is performed.

So I have this function:

function validaProgetti() {

     $.ajax({
           type: "POST",
           //data: {'checkedRowList' : checkedRowList},
           data: JSON.stringify(checkedRowList),
           url: "validaProgetti",
           contentType:"application/json"

        }).done(function(response) {
            $('.modal').modal('hide');
            sostituisciFrammentoJsp('outputRicerca', response);

            //alert("SUCCESS");

        }).error(function(xhr) {
            alert("ERROR");
            manageError(xhr);
        });

}

As you can see into the done() body I have these 2 call:

$('.modal').modal('hide');
sostituisciFrammentoJsp('outputRicerca', response);

I need that the sostituisciFrammentoJsp() execution is performed after 3 seconds of delay to ensure that the previoius function is complete.

How can I correctly set a delay for this function?

http://stackoverflow.com/a/24852/4677505 – Ziki Oct 02 '15 at 11:24 — Ziki, Oct 02 '15 at 11:24
Is that a Bootstrap modal? – T.J. Crowder Oct 02 '15 at 11:25 — T.J. Crowder, Oct 02 '15 at 11:25
FYI, `error()` is deprecated, use `fail()` instead – A. Wolff Oct 02 '15 at 11:31 — A. Wolff, Oct 02 '15 at 11:31

score 6 · Accepted Answer · answered Oct 02 '15 at 11:24

...after 3 seconds of delay to ensure that the previoius function is complete.

Let's do better than that, and actually wait for the previous function to complete:

$('.modal').modal('hide').one("hidden.bs.modal", function() {
    sostituisciFrammentoJsp('outputRicerca', response);
});

(Note I used one, not on, so the handler gets autoremoved after the event occurs.)

Note that I've assumed there you're using a Bootstrap modal, but other "modal" libraries will offer a similar event or callback.

But answering the question you actually asked, you can set up a callback after three seconds with setTimeout:

$('.modal').modal('hide');
setTimeout(function() {
    sostituisciFrammentoJsp('outputRicerca', response);
}, 3000);

The number at the end is in milliseconds (thousanths of a second).

score 1 · Answer 2 · answered Oct 02 '15 at 11:24

1

Just use javascript setTimeout

setTimeout(function(){
    // your code here
}, timeInMillis);

Using this command will schedule an operation for the time you pass.

answered Oct 02 '15 at 11:24

Victor

8,309
14
80
129

score 0 · Answer 3 · answered Oct 02 '15 at 11:25

Option : 1

clearTimeout(window.timer);
window.timer=setTimeout(function(){ // setting the delay for each keypress
                ajaxSearchRequest($type); //runs the ajax request

        }, 3000);

Option : 2

// set your delay here, 2 seconds as an example...
var my_delay = 2000;

// call your ajax function when the document is ready...
$(function() {
    callAjax();
});

// function that processes your ajax calls...
function callAjax() {
    $.ajax({
        // ajax parameters here...
        // ...
        success: function() {
            setTimeout(callAjax, my_delay);
        }
    });
}

How can I perform this JavaScript call after a delay time?

3 Answers3