jQuery setTimeout() Function Examples

Originally published at: http://www.sitepoint.com/jquery-settimeout-function-examples/

The JavaScript setTimeout function calls a function or executes a code snippet after a specified delay (in milliseconds). This might be useful if, for example, you wished to display a popup after a visitor has been browsing your page for a certain amount of time, or you want a short delay before removing a hover effect from an element (in case the user accidentally moused out).

Basic setTimeout Example

To demonstrate the concept, the following demo displays a popup, two seconds after the button is clicked.

See the Pen CSS3 animation effects for Magnific Popup by SitePoint (@SitePoint) on CodePen.

Syntax

From the MDN documentation, the syntax for setTimeout is as follows:

var timeoutID = window.setTimeout(func, [delay, param1, param2, ...]);
var timeoutID = window.setTimeout(code, [delay]);

where:

  • timeoutID is a numerical id, which can be used in conjunction with clearTimeout() to cancel the timer.
  • func is the function to be executed.
  • code (in the alternate syntax) is a string of code to be executed.
  • delay is the number of milliseconds by which the function call should be delayed. If omitted, this defaults to 0.

setTimeout vs window.setTimeout

You’ll notice that the syntax above uses window.setTimeout. Why is this?

Well, setTimeout and window.setTimeout are essentially the same, the only difference being that in the second statement we are referencing the setTimeout method as a property of the global window object.

In my opinion this adds complexity, for little or no benefit—if you’ve defined an alternative setTimeout method which would be found and returned in priority in the scope chain, then you’ve probably got bigger issues.

For the purposes of this tutorial, I’ll omit window, but ultimately which syntax you chose is up to you.

Continue reading this article on SitePoint
2 Likes

Shouldn’t the title state “JavaScript” instead of “jQuery”?

Yeah, it’s an update to an old, popular, article so we decided keeping the title the same made sense.

I don’t think that passing function.apply or function.call as the first parameter of setTimeout would work the same way as function.bind. apply and call call the function immediately, so setTimeout will try to use return value of function, not the function itself.

1 Like

Oops. Good point.
Where I was testing with such a short delay, the difference wasn’t noticeable, but doing:

setTimeout(person.introduce.apply(person, ["apply"]), 5000);

Still logs the result straight away, as, as you say, the function is invoked immediately.
I’ve updated the article.

It is admittedly strange to see an article headed with jQuery that doesn’t mention jQuery anywhere at all within it, or even show one or two lines of jQuery code.

Is it feasible to do some lampshade hanging and briefly mention at the start of the article that even though jQuery has no setTimeout or setInterval specific methods, that the standard JavaScript techniques can be used, and here they are?

FWIW, the article does mention jQuery, in two sections. Personally, I would have just renamed the article to “JavaScript and jQuery setTimeout() Function Examples”. I don’t think that would have harmed the SEO benefits (this article has gotten tons of traffic from web searches, so that’s why they didn’t change the title on the rewrite). But I think it would have been fine with a slightly different title that still uses the word jQuery.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.