how to make a timer run again and again in javascript

Question

i want to make a 20 seconds countdown timer, when timer comes to zero it refreshes iframe. and then after refreshing iframe timer again comes to 20 seconds and after it comes 0 it again refreshes iframe. how can i do this, i have a js timer script which refreshes the iframe but i don't know how to make this script run again and again.

<script>
var tT;
var timer=20;
var stop;
$(document).ready(function(){
    tT=document.getElementById('timer');
    tT.value=timer;
    stop=setInterval(function(){
        if(timer>0){
            timer--;
            tT.value=timer;
        }else{
           clearInterval(stop);
    }},1000);
    setTimeout(function(){
      document.getElementById('timer').value = timer;
     document.getElementById('exchanger').src = document.getElementById('exchanger').src;

    },20000);
});
</script>

Iframe :-

<input id="timer" value="20" type="text" size="2" readonly style="border:none;background:transparent;width:18px;text-align:center">

Use `setInterval` instead of `setTimeout` like you have done before. — Albzi, Jul 11 '17 at 09:07
And please always format your code. If it gets longer and longer, itisdifficulttofollowifyoudontdoso. — Jonas Wilms, Jul 11 '17 at 09:10

score 0 · Answer 1 · answered Jul 11 '17 at 09:11

0

Use

setInterval(function, delay)

Here is the code for your function

(function(){
// do some stuff
setTimeout(arguments.callee, 20000);

})();

for reference, this question is already marked here on below link: Calling a function every 60 seconds

answered Jul 11 '17 at 09:11

ahmednawazbutt

823
12
34

Milan Chheda · Answer 2 · 2017-07-11T09:18:07.777

0

Here is a sample code to help you out:

function loadlink() {
  $('#iframeId')[0].contentWindow.location.reload(true);
}

loadlink(); // This will run on page load
var count = 1;
setInterval(function() {
  $(".timer").text(count)
  count++;
  if (count == 20) {
    loadlink() // this will run after every 20 seconds
    count = 0;
  }
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timer"></div>


<iframe id="iframeId" class="myframe" name="myframe" src="http://google.com"></iframe>

edited Jul 11 '17 at 09:18

answered Jul 11 '17 at 09:12

Milan Chheda

8,159
3
20
35

$('#iframeId')[0].contentWindow.location.reload(true); "#" is necessary before iframe id? – Jul 11 '17 at 13:26
Yes, since its an iframe, it is necessary. – Milan Chheda Jul 11 '17 at 13:28
As an alternative, you can remove the iframe and refresh a DIV container. Its easy to tweak this code for DIV container. – Milan Chheda Jul 11 '17 at 13:31
It is not working on 000webhost.com. I had a solution sometime ago but I have lost it, the solution was using for loop and it worked great but I deleted the script by mistake – Jul 11 '17 at 14:19

score 0 · Accepted Answer · 2017-07-13T07:08:35.700

I followed Albzi's suggestion (who commented on my question), I
Used setInterval instead of setTimeout and It worked!

the final script is:

var tT;
var timer=20;
var stop;
$(document).ready(function(){
tT=document.getElementById('div-ID');
tT.value=timer;
stop=setInterval(function(){
if(timer>0){
timer--;
tT.value=timer;
}else{clearInterval(stop);
}},1000);
setInterval(function(){ // I changed setTimeout here
document.getElementById('Iframe-ID').src = document.getElementById('Iframe-ID').src;
timer=20;
},20000);
});

and HTML: <div id="Div-ID"></div> Iframe: <iframe id="Iframe-ID" src="source-url"></iframe>

how to make a timer run again and again in javascript

3 Answers3