JavaScript Timers with setTimeout and setInterval

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

14-Jan-07 23:00
This is a forum topic for discussing the article "JavaScript Timers with setTimeout and setInterval":

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

In this tutorial we'll look at JavaScript's setTimeout(), clearTimeout(), setInterval() and clearInterval() methods, and show how to use them to set timers and create delayed actions.
03-Mar-10 02:54
Excellent explanation of timers and your examples are great.
Thank you.
03-Mar-10 15:34
@akeane: Thanks for your kind words. I'm glad you enjoyed the tutorial.

Cheers,
Matt

--
Matt Doyle, Elated
10-Apr-10 14:57
Another thing to talk about here with setInterval is setting a loop counter and clearing the interval when that loop count is hit.



var counter = 0
intervalId = 0;

function myLoopFunction()
{
intervalId = setInterval(function() {
//make this is the first thing you do in the set interval function
counter++;

//do you code for setInterval() and clearInterval under normal conditions here...

//okay, if we have tried for 5 minutes (30 x 10 seconds ), then lets stop trying because we did not reach the clearInterval under number means

//make this the last check in your set interval function
if ( counter > 30 ) {
clearInterval(polliFrameSourceIntervalId);
}

//end setInterval
} , 10000);



06-Dec-10 23:12
Very useful post, and the examples are just superb, thanks, it helped a lot!!

--
Guptas
09-Dec-10 18:22
@anupam: Thanks, glad you found it helpful

--
Matt Doyle, Elated
19-Jan-11 07:27
I Just want to thank you for such a great and simple to follow tutorial. I have looked at a lot over the past few weeks and I have got to say this is the best one I have seen for ages. Keep up the good work this has helped me heaps.
20-Jan-11 13:20
@NT_Jester: You're welcome - thanks for the kind words. Hope life is good up in the NT!

--
Matt Doyle, Elated
19-Aug-11 07:47
Great and detailed explanations, I took the time to create an account just to thank you as it helped debugging a JavaScript issue I had since a while.
23-Aug-11 22:41
@ecommy: Great stuff

--
Matt Doyle, Elated
08-Feb-12 07:16
Thank you for this post.
I was able to modify this for a music writing application.
I will link back.
13-Feb-12 03:10
@froopy: You're welcome - thanks for the link back

--
Matt Doyle, Elated
30-Apr-12 16:10
thank you for taking the time to create this clear and useful post!
06-May-15 06:47
Start a new thread please rather than hijacking this Article discussion.


Thank You

[Edited by chrishirst on 06-May-15 10:01]
19-May-15 05:39
Hello,

this is my script


<script>function setToRed ( ) { document.getElementById("moondoge").style.backgroundColor = "#FF0000";
setTimeout ( "setToBlack()", 10000 );
} function setToBlack ( )
{ document.getElementById("moondoge").style.backgroundColor= "#009933";
}
</script>

<script>function setToRed ( ) { document.getElementById("freedoge").style.backgroundColor = "#FF0000";
setTimeout ( "setToBlack()", 20000 );
} function setToBlack ( )
{ document.getElementById("freedoge").style.backgroundColor= "#009933";
}
</script>



and this is my html



<a href="http://moondoge.co.in/" target="_blank">
<input type="button" name="clickMe" id="moondoge" value="Moon Doge" onclick="setToRed()"/>

<a href="https://freedoge.co.in" target="_blank">
<input type="button" name="clickMe" id="freedoge" value="Free Doge" onclick="setToRed()"/>



After click on a moondoge button the second button changes the color into red and not the moondoge.

Any suggestions?

Thanks in advance
19-May-15 17:05
Just look at it logically, you have two function sets, BOTH sets of functions have the same names, which is going to be called when you "click" one of the buttons?

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
19-May-15 18:36
Hello Chris, thanks for your replay.
I'm sorry, but I'm a totally new in this script/html language. I know that it sound crazy, but I really don't know what you mean.
I try to add 1 at the end of function setToRed1( ) ...


<script type="text/javascript">
<script>function setToRed( ) { document.getElementById("moondoge").style.backgroundColor = "#FF0000";
setTimeout ( "setToBlack()", 10000 );
} function setToBlack ( )
{ document.getElementById("moondoge").style.backgroundColor= "#009933";
}
</script>

<script>function setToRed1( ) { document.getElementById("freedogecoin").style.backgroundColor = "#FF0000";
setTimeout ( "setToBlack()", 10000 );
} function setToBlack ( )
{ document.getElementById("freedogecoin").style.backgroundColor= "#009933";
}
</script>


html code


<a class="button" href="http://moondoge.co.in/" target="_blank"><input type="button" name="clickMe" id="moondoge" value="Moon Doge" onclick="setToRed( )"/>

<a href="http://freedoge.co.in" target="_blank">
<input type="button" name="clickMe" id="freedogecoin" value="Free Doge Coin" onclick="setToRed1( )"/>


First button doesn't change the color at all, the second button Free Doge Coin works perfectly.

When I try to add the 3rd button


<script>function setToRed2( ) { document.getElementById("dogefree").style.backgroundColor = "#FF0000";
setTimeout ( "setToBlack()", 10000 );
} function setToBlack ( )
{ document.getElementById("dogefree").style.backgroundColor= "#009933";
}
</script>



<a href="http://dogefree.net/" target="_blank">
<input type="button" name="clickMe" id="dogefree" value="Doge Free" onclick="setToRed2( )"/>


The second button changes the color into red, but after 10 sec. the 3rd button changes color to green and not the second one. The second button is red all the time, now the 3rd button works perfectly.
I'm totally confuse.

I have 38 buttons to set to work this way.
Could you, please, correct my code/function set to work perfectly, I will be very grateful.
20-May-15 23:29
Just use one set of functions, one to red and one to black. Pass the name of the buttons when you call the function.

<script>
var dogebutton="";
function setToRed (dogebutton) {
document.getElementById(dogebutton).style.backgroundColor = "#FF0000";
setTimeout(function(){ setToBlack(dogebutton) }, 10000);
}
function setToBlack (dogebutton){
document.getElementById(dogebutton).style.backgroundColor= "#009933";
}
</script>



<a href="http://froopysnotebook.com/" target="_blank">
<input type="button" name="clickMe" id="moondoge" value="Moon Doge" onclick="setToRed('moondoge')"/>

<a href="http://froopysnotebook.com/pr" target="_blank">
<input type="button" name="clickMe" id="freedoge" value="Free Doge" onclick="setToRed('freedoge')"/>

21-May-15 11:51
Many many thanks for your reply, froopy, it works perfectly.

I just forgot to mention that I have different time interval for different buttons; 90 sec. for Moon Doge, 60 sec. for Free Doge, 10 min. for ...
I have 10 buttons with 90 sec. interval,
20 buttons with 60 sec. interval,
15 buttons with 10 minutes interval, ...

I guess that I have to add some additional function and I try it, but it's not working.
Could you help me with this, please!
21-May-15 17:25
You pass values to ONE function as parameters, and those values determine which element they affect or manipulate and how they it.

I'm going to write a full answer with examples at my forum simply because it has much better editing tools and I can write a whole article rather than a cramped up forum post and I will provide a link to the article here.

With any luck it will be a quiet Friday and I'll had it done for late tomorrow.



I'll be back!

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
21-May-15 18:25
Great, thanks in advance.

Have a nice day!
22-May-15 18:02
Bit later than anticipated, but


http://webmaster-talk.eu/articles/8-website-development-and-design/45-javascript-functions-write-once-use-many

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/
30-Aug-17 06:24
This is an example of JavaScript automatic popup closing after 10 seconds with countdown,



<p style="text-align:center">This window will close automatically within <span id="counter">10</span> second(s).</p>
<script type="text/javascript">



function countdown() {

var i = document.getElementById('counter');

i.innerHTML = parseInt(i.innerHTML)-1;

if (parseInt(i.innerHTML)<=0) {

window.close();

}

}

setInterval(function(){ countdown(); },1000);

</script>


I have found it into PHPAns Forum. Hope this will be helpful for you.

[Edited by sajjadhira on 30-Aug-17 06:25]

--
Programming is my passion, this site I love most.
http://phpans.com

 
New posts
Old posts

Follow Elated