Timer Functions

There are two main time intervals:-

setTimeout and setInterval

setTimeout(function, milliseconds);
Executes a function after waiting a specified number of milliseconds (1000 = 1 second)

setInterval(function, milliseconds);
same as setTimeout but repeats the execution of the function continuously (1000 = 1 second)

And when you need to STOP the timers you need to use:-

clearTimeout(myVar);
To stop the setTimeout function.

clearInterval(myVar);
To stop the setInterval function.

NOTE...
Your function may not run exactly when you specify, for example,
if you set the timer to run your function in 5 seconds then when the countdown reaches 5 seconds it lets the system know that your function can now be run and your function will be added to a task queue.
If there are still tasks running then these will be completed before your task runs.
Therefore it is fair to say "Wait 5 seconds then run my function when you're ready".

Example of setTimeout(function, milliseconds)

NOTE...
this really expects a function with NO parameters to be passed to the timer event
eg
onclick = "setTimeout(myTimerA, 5000)"
but if you really need to pass parameters then you can do it with an unnamed function
eg
onclick = "setTimeout(function() {myTimerA('timeoutMess')}, 5000)"

So to demo it I am doing...
...on a button click it will wait for the specified time and then it will...

run myTimer('timeoutMess') - a function that passes it a parameter so it knows where to display the message.
It also runs a function (readTime('myTimeout', 'timeoutMess')) with 2 parameters to calculate the time it needs to wait before displaying the message.

So...This will wait for the number of seconds you specified and when the time is up it will display a message.

Time to wait (in seconds):

Note...If you need to STOP the timer you can use the clearTimeout() routine...see separate example below

Example of setInterval(function, milliseconds)

NOTE...
this ALSO expects a function with NO parameters to be passed to the timer event
but the same rules apply that I listed previously.

So...This will wait for the number of seconds you specified and when the time is up it will display a message - continuously.

Time to wait (in seconds):

Note...If you need to STOP the timer you can use the clearInterval() routine...see separate example below

I would advise you look at the code as I saw that you could click multiple times to start the timer multiple times but stopping the timer (multiple times) did not stop them all from running.

I found it was best to call my own function on the button click and inside my own function(s) I could manipulate how the timer counts work.

Example of clearTimeout(myVar)

NOTE...
this requires you to create a VARIABLE that holds the details of the setTimeout that was used.
To do this you just need to add a var myVar = just before the setTimeout command
eg
onclick = "var myVar = setTimeout(myTimerA, 5000)"
Note you are NOT putting quotes around the 'setTimeout(myTimerA, 5000)''

Then when you create your button to STOP the timer you will just say
<button onclick="clearTimeout(myVar)">Stop it</button>

Example of clearInterval(myVarI)

NOTE...
this requires you to create a VARIABLE that holds the details of the setInterval that was used.
To do this you just need to add a var myVarI = just before the setInterval command
eg
onclick = "var myVarI = setInterval(myTimerA, 5000)"
Note you are NOT putting quotes around the 'setInterval(myTimerA, 5000)''

Then when you create your button to STOP the timer you will just say
<button onclick="clearInterval(myVarI)">Stop Timer</button>

Lets just scroll through some pictures...

This uses the methods...
setInterval()
clearInterval()

and also it disables / enables the Restart Scrolling button by using the property
document.getElementById("idName").disabled = true (or false)
Note...you need to set the backgroundColor to grey when disabled ... and clear it back to normal when not disabled

Scrolling images

setTimeout with parameters in the function

If, using setTimeout and you need to pass parameters to the function then...

Lets say you have a function, with 2 parameters in this example...

function myFunction(param1, param2) {
return "This is myFunction 2 " + param1 + " " + param2;
}

With setTimeout you need to include the parameters on the end, like this...

setTimeout(myFunction, 2000, param1, param2);
note the parentheses () are still NOT present as the timer is just referencing it now and will run it later.