Introduce Timers JavaScript Essential Training

Introduce Timers JavaScript Essential Training

Javascript, TUTORIALS, WEB

Introduce Timers JavaScript Essential Training




In this Introduce Timers JavaScript Essential Training lesson we are gonna learn the timing intervals we used in javaScript like set interval, set timeout and etc. Here in this lesson we show how to change an image by its ID in a particular time.
Here we using an array of image list and we change the image in a particular time interval, for example we use 5000 for five seconds timing break.
setTimeout Event – Introduce Timers JavaScript Essential Training
As a first step we use the set time out function for how to use the function to make a delay at only once when the window is loaded for first time or when ever the event is triggered.

Introduce Timers JavaScript Essential Training
Here in setTimeout event we need two parameters which are the function we wants to execute and the time of interval we wants the function to be executed.
The above shown is an simple example and triggers the alert message after the 5 seconds which we set as the second parameter. Here we didn’t mention any events to run the function, but it can run at the first time when we refresh the browser.
setInterval Event – Introduce Timers JavaScript Essential Training
The next event we have to focus on is the setInterval event. Where the setTimeout is run only once when the event is triggered, but the setInterval is runs in the time interval period we set as manually. It can runs unlimited by the time interval, we can use it for the particular element or the over all the browser page.
Here this lesson Introduce Timers JavaScript Essential Training in this section we are gonna show how the auto run slide shows are run by default using the setInterval event.




Introduce Timers JavaScript Essential Training
The image will shows the result of above given script, in that script we get the image element by its id and create an image array for storing list of array and also set the image index as 0 for the increment purpose.
In Introduce Timers JavaScript Essential Training we already told the time is an important part in this lesson as like this list of images are changed automatically when the interval is reached. Here we concentrate the image index for point out the next image when the time interval reaches the given time.
Here we create a function called changeImage() which can handles the imageIndex increment and move the index pointer to the next image and pull the value and put it into src attribute. And then we increment the imageIndex value by one for points out the next image.
In such case the index of the array will reaches end of the array and in that point we set the imageIndex as 0 again. Then the cursor position is comes to the beginning of the index values.
In this Introduce Timers JavaScript Essential Training we can also make the event run by the onclick event like the interval is start or end by click on the element.

The above shown simple script is stops the interval function on click the element like the image or button and etc.
We hope this lesson will gives you an basic knowledge about the interval in javascript programming language. We can learn a lot more in the upcoming lessons in the future.




Leave a Reply