Monday , 20 November 2017
Home / Programming / JavaScript / Timing Events – Advanced JavaScript Tutorial
Timing Events
Timing Events

Timing Events – Advanced JavaScript Tutorial

There are 2 kinds of timing events. There’s one with timeouts and another with intervals. Timeouts execute once after a certain amount of time has passed by. Intervals execute repeatedly after a certain amount of time has passed by.

Timeouts

Clear your script and add this bit of code.

To create a timeout you use the setTimeout() method. This method accepts 2 arguments. The first argument is the function that will execute when this timeout executes. The second argument is the amount of time from now the function will execute. The number that is inputted will be read as milliseconds. So, 1000 milliseconds equals 1 second.   Our function is an anonymous function.

Why don’t we just call outputName()?

Well, JavaScript will actually execute the function if we try to directly call it. So, we use an anonymous function so it doesn’t execute so instantly. Also, it keeps things cleaner. When you work on bigger projects, you may end up nesting your functions. In this case, it would be better to create the functions outside the nested statements and then call them inside.

When a timeout is created, JavaScript will add it to a queue of events to execute. JavaScript will also each timeout a unique numeric ID. This ID is returned back to us when we create it. So, to store that ID, we can just store it in a variable like so.

The unique ID is useful for 1 thing. In some situations, you’ll want to stop an event from running. In this case, you would use the clearTimeout() method to do so. It has 1 parameter and that’s the ID of the timeout event to cancel. Here’s how you would us it.

If you refresh your page, then you should see that our timeout doesn’t run.

Intervals

Intervals are similar to timeouts. However, intervals run repeatedly. Clear your script and add this bit of code.

Just like our last example, we’re alerting a name. To set an interval, you use the setInterval() method. The first parameter is the function to execute and the second parameter is the amount of milliseconds that must pass by for this event to run.

Every 7 seconds you should get an alert message. Refresh your page and you should see this happen. Just like timeouts, the setInterval() method will return a unique numeric ID. This ID can be used to cancel an interval. Update your alertName() function to this.

After the first interval, we’re just going to cancel all future events with the clearInterval() method. This method has 1 parameter which is the ID for the event.

Conclusion

So, which one should you use? Well, you can use either one depending on your needs. However, a lot of developers like to avoid intervals as they aren’t always guaranteed to execute and you can actually end up skipping some. A common technique is just to keep creating timeouts in the functions to mimic the effect of intervals.

For more information on timing events, then check out this link.

http://www.w3schools.com/js/js_timing.asp

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link