JQuery setTimeOut: How to Use Timers to Set Delays

JQuery is a lightweight JavaScript library. It’s basically a bunch of functions and plugins that make it easier for you to use JavaScript on your website. JQuery takes many commonly required tasks related to website creation, that would normally require many lines of JavaScript code, and combines then into easy methods, that you can call directly and easily. Learning how to effectively use jQuery, requires a basic understanding of HTML, CSS, and JavaScript, since these three languages form the basic framework for modern web pages. If you are new to the world of web site creation, you may first want to check out this basic course that shows how HTML and CSS come together. We have another fundamental course that introduces HTML with JavaScript that will help you get a jump start on jQuery.

In today’s tutorial, we’ll show you how can set timers and delay certain actions with jQuery timers. Though you don’t need much prior jQuery experience for this, it would be good to first do this beginners course on jQuery, so that you can better relate to the code and examples we will be using.

The Basic setTimeOut Function

If you want to delay your code to run after a certain amount of time, you can use the setTimeOut function to do so. This is a basic JavaScript function and can be used in jQuery without any extra parameters. The basic syntax or the jQuery setTimeOut function looks like this:

setTimeout(function() {
      // Do something after 3 seconds
      // This can be direct code, or call to some other function
     }, 3000);

Note that the function takes time in millisecond – and hence we have specified ‘3000’ as the timeout value. In the block, you can either write a few lines of code directly or you can call some other function. For example you could call a second function that creates a pop-up with some message.

Tip: you can use the ClearTimeout() function to clear any previously set timer values. Here’s how you can do this:

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

Example: Show a Message for 3 Seconds after Clicking

Let’s see a simple example where we show a message on screen for  3 seconds, after the user has clicked a button.

<!-- show a message for 3 seconds after you click the button -->
<input type="button" value="click me to show message"
  onclick="setTimeout('window.alert(\'Hello!\')', 3000)" />

Note the first line where we are invoking a button with the message “click me to show message”. The second line starting with ‘onclick’ makes sure that the text ‘Hello’ is displayed on screen, for 3000 milliseconds (i.e., 3 seconds).

Example: Make a Div Element Fade Out after 4 Seconds

Here’s how you can make a div element fade out after 4 seconds. (If you don’t know what a div element is, it’s time for you to look up this HTML Prep course)

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

Here we keep track of the div element “#div1”, and schedule the hide() function to be called after 4 seconds.  Note that the syntax we have used is slightly different than we showed earlier. This is so that you can get a glimpse of the shorthand format as well. The proper long form way to write this code would be

jQuery(document).ready(function () {
    //hide a div after 4 seconds
setTimeout(function(){ jQuery("#div1").hide(); }, 4000);
});

Example: Show a Message for 3 Ceconds after Clicking – The More Professional way

We could do this same thing in another, more organized way – which is what professional programmers do.  They organize the code into separate, independent and reusable function calls. Here’s how:

<script language="Javascript">
function timeout_trigger() {
    window.alert('Hello!');
}

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

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

If you pay attention, you will see that here we have separated out each of the parts of the earlier example. The actual script is simple – it just shows the button with a message ‘click me’. Instead of directly writing the onclick event, we instead redirect it to a function timeout_init(). Timeout_init() is the wrapper for our earlier setTimeOut() function.  Here again, we don’t call the window alert message directly. Rather we have moved it out to a separate function timeout_trigger(). At first glance, for the new programmer, this may seem like a rather unnecessary bunch of complications. However, if you are writing a large amount of code, and have to bother about things like re-usability and modularity, this is definitely the way to go.

While we are at it, can you re-work the div fadeout example similarly?  Try it out for yourself first before going ahead.

Example: Make a Div Element Fade Out after 4 Seconds – The Modular Way

Like we said earlier, the direct one line has it all approach is fine for simple programs. Once you start writing more complex programs on your own, you are going to want to get more organized and modular. The sooner you start practizing it, the better. Let’s re-do our earlier div fade out example in a better way:

$(document).ready(function() {
    $('#btnFade').bind('click', function() {
      FadeOut();
  });
  function FadeOut()
  {
      setTimeout(function () { FadeDiv(); }, 4000);
  }
  function FadeDiv()
  {
    $('#div1').fadeOut();
  }
});

As you can see, here we have again separated out each component into it’s own function. This gives you the advantage that if you ever want to change or customize certain parts of it, you can easily do so. In many cases, the code will live on for years after you write it, and be used time and again by multiple people. Modularity makes sure that your code is easy for anyone else to also understand and re-use. It’s a good habit to make it part of your default programming methods.

We hope you enjoyed this tutorial. Do take the time out to practice on your own. If you’re looking for some inspiration, feel free to check out this course with many jQuery projects. Happy programming!