- setTimeout( function, interval )
- setInterval( function, interval )
NOTE: There are actually other ways to invoke these functions; but, using a function reference is the only way that I would recommend using them.
Each of these functions will invoke the given callback (function argument) after the given interval has passed. The difference between these two functions is that setTimeout() will only invoke the callback once whereas setInterval() will invoke the given callback over and over again, pausing between invokations for a duration defined by the given interval.
When you call these functions - setTimeout() and setInterval() - they pass back a unique token that represents the timer that you have just configured:
var timerID = setTimeout( function, interval ); var timerID = setInterval( function, interval );
There is no requirement to store this token; however, storing this token will allow you to cancel the future invocation of your callbacks, should the conditions of your application change. Once you have these timer tokens, you can cancel the timers using either the clearTimeout() or clearInterval() function:
- clearTimeout( timerID )
- clearInterval( timerID )
As you might have guessed, clearTimeout() can be used in conjunction with the setTimeout() tokens and clearInterval() can be used in conjunction with the setInterval() tokens. Once a timer has been cleared, it will not fire again. Should you want to re-configure a timer, you will need to call either the setTimeout() or setInterval() functions again.
Now that we see how to plan the future execution of callbacks, let's see how these functions can be used to delay UI reactions based on user interactions. In the following demo, we have an external link that triggers the opening of a footer area. If the user does not interact with the footer in a given amount of time (4 seconds), the footer will close automatically.
In this demo, the user can actively engage in three different interactions:
- Open the footer.
- Mouse into the footer.
- Mouse out of the footer.
When the user clicks the open-footer link, we want to show the footer and configure a timer that will close the footer if the user chooses not to engage with it. We do this through the use of setTimeout(). In the above code, if the user does not engage with the footer within 4,000 milliseconds (4 seconds), our timer will execute the closeFooter() function, sliding the footer down and out of view.
If the user does choose to engage with the footer, however, we want to make sure that the footer does not close while the user is interacting with it. As such, when the user mouses into (mouseenter) the footer, we use clearTimeout() to cancel the future invocation of our closeFooter() callback.
In this particular demo, I am checking the animation status of the footer before I perform any further UI logic. In this approach, we don't have to worry about double-clicking and mid-animation interactions. We can always expand our logic to deal with such situations later; however, that quickly adds complexity that is not relevant for this explanation.
While approaches to this kind of situation may vary widely, I think you'll find that they typically operate off of the setTimeout() and clearTimeout() functions. I hope that this helps shed some light on delayed interface reactions based on user interactions.
Want to use code from this post? Check out the license.