How to wait 5 seconds with jQuery?
Built in javascript setTimeout.
setTimeout(
function()
{
//do something special
}, 5000);
UPDATE: you want to wait since when the page has finished loading, so put that code inside your $(document).ready(...);
script.
UPDATE 2: jquery 1.4.0 introduced the .delay
method. Check it out. Note that .delay only works with the jQuery effects queues.
Use a normal javascript timer:
$(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
});
This will wait 5 seconds after the DOM is ready. If you want to wait until the page is actually loaded
you need to use this:
$(window).load(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
})
EDIT: In answer to the OP's comment asking if there is a way to do it in jQuery and not use setTimeout
the answer is no. But if you wanted to make it more "jQueryish" you could wrap it like this:
$.wait = function( callback, seconds){
return window.setTimeout( callback, seconds * 1000 );
}
You could then call it like this:
$.wait( function(){ $("#message").slideUp() }, 5);
I ran across this question and I thought I'd provide an update on this topic. jQuery (v1.5+) includes a Deferred
model, which (despite not adhering to the Promises/A spec until jQuery 3) is generally regarded as being a clearer way to approach many asynchronous problems. Implementing a $.wait()
method using this approach is particularly readable I believe:
$.wait = function(ms) {
var defer = $.Deferred();
setTimeout(function() { defer.resolve(); }, ms);
return defer;
};
And here's how you can use it:
$.wait(5000).then(disco);
However if, after pausing, you only wish to perform actions on a single jQuery selection, then you should be using jQuery's native .delay()
which I believe also uses Deferred's under the hood:
$(".my-element").delay(5000).fadeIn();