jQuery setTimeout() Function Examples

Sam Deering

The JavaScript setTimeout function can be used in a jQuery script to automate a task using a single-use, time-based trigger.

This function is very similar to JavaScript’s setInterval() Function.

View code on GitHub

Basic setTimeout() Example

setTimeout(function() {
      // Do something after 5 seconds
}, 5000);

Tip: you can use the ClearTimeout() function to clear any timer values previously stored.

timeout = setTimeout('timeout_trigger()', 3000);
clearTimeout(timeout);

More setTimeout() Examples

jQuery(document).ready(function () {
	//hide a div after 3 seconds
	setTimeout( "jQuery('#div').hide();",3000 );
});

Or in a different way:

jQuery(document).ready(function () {
	//hide a div after 3 seconds
	setTimeout(function(){ jQuery("#div").hide(); }, 3000);
});
<!-- show a message for 2 seconds after you click the button -->
<input type="button" value="click me" 
  onclick="setTimeout('window.alert('Hello!')', 2000)" />

Or as a function:

<script language="Javascript">

function timeout_trigger() {
    window.alert('Hello!');   
}

function timeout_init() {
    setTimeout('timeout_trigger()', 2000);
}

</script>
<input type="button" value="click me" onclick="timeout_init()" />

Take your jQuery skills to the next level with SitePoint’s premium subscription service. You’ll find dozens of books and courses on JavaScript and jQuery — and more added every month!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • foo

    Lame… that’s not jQuery, that’s javascript

    • http://jquery4u.com/ jQuery4u

      Yes setTimeout functions are native to JavaScript. I think you mean JavaScript, no jQuery?

      • bar

        yeah but you make it sound like it’s some kind of jQuery specialty, which is just plain wrong and stupid … (“This function is very similar to the jQuery setInterval() Function.”)

    • cmario00

      I second that, extremely lame.

  • Greg

    with 1.7.1 this throws an error
    timeout_trigger() not defined.

    tried embedding the trigger function, and even inline – same error. anyway around this?
    ———function that throws error:function timeout_trigger() { window.alert(‘Hello!’); } function timeout_init() { setTimeout(‘timeout_trigger()’, 2000);}

    • kokuou

      That’s because ‘timeout_trigger()’ is a user-defined function here. If you don’t have a correlating function with the same name in your script, of course it’s going to throw an error.

  • http://twitter.com/BluewaveDesign_ Bluewave Design

    jQuery4u:

    This proved helpful to jog my memory into the myriad of posabilites for this function, thanks :)

    foo:
    jQuery is a framework, and so by default is JavaScript, so ergo Mr Deering’s post is factual and correct, and “Lame” isn’t exactly constructive.

    • Dave

      Clearly the point foo was making was that referring to the function as “the jQuery setTimeout function” is misleading. It suggests the jQuery framework is required in order to use it, which it is not.

    • http://jquery4u.com/ jQuery4u

      thanks

  • jojo

    useful

  • Brad Coughlin

    Thanks!

  • fb

    thx

  • Hannah

    Hello there…

  • Rune Jeppesen

    I don’t like the syntax.
    Why not use
    setTimeout(timeout_trigger, 2000);
    Instead of
    setTimeout(‘timeout_trigger()’, 2000);

    And
    setTimeout(jQuery(‘#div’).hide,3000 );
    instead of
    setTimeout( “jQuery(‘#div’).hide();”,3000 );

    • jerin

      thanks
      i need some job

  • Duu

    delay() in jQuery

  • ffffgggg

    Nice! Thanks!

  • Максим Мазурок

    ‘window.alert(‘Hello!’)’
    should be:
    ‘window.alert(“Hello!”)’ or “window.alert(‘Hello!’)”