jQuery Settimeout Function Example

Let's have a closer look at the jQuery .settimeout() function.

Demo Code Download

Description

You can delay a task based on time using the JavaScript setTimeout() function which can be used to wait for a spcified length of time before running the code.

There is also another demo: jQuery setTimeout() Function Examples. Lets have a look at an example of the settimeout jQuery function in action. Further Reading »

Demo

jQuery Function Demo - jQuery4u.com

Demo: Doing something after a specified length of time.

Click "Run Demo" to set the timeout and click "Reset" to clear the timeout.

Run Demo View Code

This text will dissapear after 3 seconds.

Download

The download package includes all the inline HTML, CSS, JavaScript, jQuery and images required for the .settimeout() function demo so you can try it yourself and change as you please.

The full code listing for all jQuery functions have been now added to GitHub, you can get them there, we are making them work with the latest versions of jQuery!

Code

<!-- Copyright 2011 jQuery4u.com -->
<!DOCTYPE html>
<html>
<title>jQuery Function Demo - jQuery4u.com</title>
<head>
    <script src="http://www.jquery4u.com/function-demos/js/jquery-1.6.4.min.js"></script>
    <script src="http://www.jquery4u.com/scripts/function-demos-script.js"></script>

    <script type="text/javascript">

    var JQFUNCS =
    {
        runFunc:
        {
            /* ------------------------------ setTimeout Demo ------------------------------ */
            "settimeout":
            {
              run: function(id)
              {
                $('#'+id).html('This text will dissapear after 3 seconds.');
                timeout = setTimeout( function() {
                  $('#'+id).fadeOut();
                }, 3000);
              },

              reset: function(id)
              {
                clearTimeout(timeout);
                $('#'+id).html('This text will now not dissapear.');
              }
            }
        }
    }

    </script>

</head>
<body>

<p class="example">Demo: Doing something after a specified length of time.</p>
<p>Click "Run Demo" to set the timeout and click "Reset" to clear the timeout.</p>
<p><a href="#" id="settimeout-demobtn" class="demobtn btn actionr">Run Demo</a> <a href="#" id="settimeout-codebtn" class="codebtn btn actionr">View Code</a> <a href="#" id="settimeout-resetbtn" class="resetbtn btn actionr" style="display: none;">Reset</a></p>
<div class="demoarea" id="settimeout">This text will dissapear after 3 seconds.</div>

</body>
</html>
<!-- Copyright 2011 jQuery4u.com -->