Using timers with setTimeout | JavaScript

Using timeouts and intervals, such as setTimeout in JavaScript, to execute code on timer expiration.

Transcript

As we’re working in javascript there may be times when we need to reach for a timer to accomplish some functionality. Some examples may be an auto-dismissing alert, maybe it’s a game, or maybe it’s an automatic redirect after a specified amount of time. In any case we have two functions at our disposal for setting these timers. The first one we’re going to look at is setTimeout. The setTimeout will specify a single function that will get executed once the timer has expired. In order to do this, we write setTimeout and the first parameter is going to be a function that will be called when the timer is expired. So in this case we can just say console.log(“expired”) and then optionally it’ll take a second parameter which is the amount of time in milliseconds before the timer expires. So in this case we’ll say after one second. If we don’t specify that time the function will get called on the next event cycle or basically immediately. Now the return value of setTimeout is a timer id. We want to capture that timer id in the event that we want to clear that timer. So if we wanted to clear this timer before the timeout has expired, we can pass the timer id that’s returned into the clearTimeout function and that will clear our timer. Our other option is if we have a recurring interval where we want to call a function on a repeating basis. For that we reach to setInterval. Just like setTimeout we call setInterval with a function and we’ll just say “repeating expired” here and then the amount of time which each interval should take. Again, this is the same as the timeout in the previous function so we say 2000 milliseconds which would be two seconds. Just like set timeout we also get a timer id. We’ll call this “intervalId”. setInterval has an accompanying function called clearInterval which just like clearTimeout. We can pass in our interval id into it and we can use that to stop our interval from firing our callback function. There’s one word of warning when you’re using these because we’re using a callback function the context in which the callback function is called may not be what you expect. If we consider this object here where it has a message property and then it has this logMessage function in which case it logs the message property and then we have this function delayedLog that has a set timeout which would immediately call the log message function because we did not specify a timeout parameter. So because the log message function has the “this” keyword in it… but this function would not be called within the context of this object “this” would actually refer to the global context when it is called and not to our object. So you need to be aware of that fact there are things that we can do to bind to “this” into this object but we’re not going to cover that in this video. Finally there’s some other “gotchas” that you need to be aware of when you’re using these functions. The first one is that the callbacks can be throttled and what that means is that the browser can limit the number of times that your callback can be called within a certain time frame. That throttling is even higher when your tab that your code is executing in is a background tab. Also the operating system scheduler can call back the function at a later time than might be expected. For instance, if the operating system was busy doing some other task your code may not run exactly on time. The final thing you should know is that on Firefox that the callback can be deferred while the page is loading and no callbacks will execute until the page has returned to an idle state. Despite all those caveats these functions are incredibly useful and for the use cases when you have a timer that needs to execute some code on expiration these are going to be the functions that you’re going to want to pull up