Menu
Community /Pin to ProfileBookmark
@daveyerwinJul 31.2021 — #if this code is not self explanatory
Please ask questions
@daveyerwinAug 01.2021 — #@zamber#1634933 said ...
Clicking start, number is displayed for the time matching the number. 5 displays for 5 seconds.
Then I click stop
___________________________________________
here is your stop code ...
When you click stop it does nothing useful !
I would ask you what exactly you expect to
happen when the stop button is pressed ?
the myFunction() continues to call it's self
after the setTimeout has finished it's count down
so the loop continues to run endlessly
every time you push start a new "endless loop"
is created and begins to run endlessly
every loop you create by pressing Start
runs endlessly independently of any other
loops that may be running
solution ...
you must stop the "endless loop" created by
the call to myFunction() before creating a new loop
This is accomplished by "clearing" the setTimeout
https://www.w3schools.com/jsref/met_win_cleartimeout.asp
Please ask more questions !@daveyerwinAug 02.2021 — #if(!startIt.disabled){ //Why is there a ! in front of the variable?
clearTimeout(tO); //Why two clear timeouts? Other in stopIt
return; //Where is the value returned to?
the ! is the "Logical negation operator"
it is pronounced "Not"
alert(!true) will alert false
alert(!false) will alert true
calling return always ends(terminates) a function
if there is a value after the return
that value is returned to the caller
in this case the return is just for the
purpose of ending the function
you are correct in your conclusion that only one clearTimeout is necessary
so let's do this ...
Random Number Selection with Random Time Display
This select random times for the setTimeout. The myFunction() calls itself. It works correctly when I click the “start” button the first time, but when I click “stop” the “start” again it goes crazy after timing several numbers correctly. It is supposed to display a number, for example, 7, for 7 seconds then randomly choose maybe 3 and display 3 for 3 seconds. For whatever reason after I start/stop it will after a few numbers, start display a 5 but then a second later display a new number without a delay.
Any ideas, please?
“`
<html><body>
<BR><BR>
<button id=startIt>Start</button>
<button id=stopIt>Stop</button>
<p id=”demo”></p>
<script>
function myFunction() {
var min = 0, max = 8;
var rand = Math.floor(Math.random() * (max – min + 1) + min); //Generate Random number between min/max
setTimeout(myFunction, rand * 1000);
document.getElementById(“demo”).innerHTML = (rand + ” ” +”<BR>”);
}
startIt.onclick = function(){this.disabled=true;myFunction()}
stopIt.onclick = function(){startIt.disabled=false;rand=0;}
</script>
</body> </html>
Sign in
to post a comment5 Comments(s) ↴
0
@daveyerwinJul 31.2021 — #if this code is not self explanatoryPlease ask questions
``<i>
</i><html><body>
<BR><BR>
<button id=startIt>Start</button>
<button id=stopIt>Stop</button>
<p id="demo"></p>
<script>
'use strict';
var tO;
function myFunction() {
if(!startIt.disabled){
clearTimeout(tO);
return;
}
var min = 0, max = 8;
var rand = Math.floor(Math.random() * (max - min + 1) + min); //Generate Random number between min/max
tO=setTimeout(myFunction, rand * 1000);
document.getElementById("demo").innerHTML = (rand + " " +"<BR>");
}
startIt.onclick=function(){
startIt.disabled = true;
myFunction();
}
stopIt.onclick=function(){
clearTimeout(tO);
startIt.disabled = false;
}
</script>
</body> </html><i>
</i>``0
@daveyerwinAug 01.2021 — #Clicking start, number is displayed for the time matching the number. 5 displays for 5 seconds.
Then I click stop
___________________________________________
here is your stop code ...
stopIt.onclick = function(){startIt.disabled=false;rand=0;}When you click stop it does nothing useful !
I would ask you what exactly you expect to
happen when the stop button is pressed ?
the myFunction() continues to call it's self
after the setTimeout has finished it's count down
so the loop continues to run endlessly
every time you push start a new "endless loop"
is created and begins to run endlessly
every loop you create by pressing Start
runs endlessly independently of any other
loops that may be running
solution ...
you must stop the "endless loop" created by
the call to myFunction() before creating a new loop
This is accomplished by "clearing" the setTimeout
Please ask more questions !
0
@daveyerwinAug 02.2021 — #if(!startIt.disabled){ //Why is there a ! in front of the variable?clearTimeout(tO); //Why two clear timeouts? Other in stopIt
return; //Where is the value returned to?
the ! is the "Logical negation operator"
it is pronounced "Not"
alert(!true) will alert false
alert(!false) will alert true
calling return always ends(terminates) a function
if there is a value after the return
that value is returned to the caller
in this case the return is just for the
purpose of ending the function
you are correct in your conclusion that only one clearTimeout is necessary
so let's do this ...
``<i>
</i><html><body>
<BR><BR>
<button id=startIt>Start</button>
<button id=stopIt>Stop</button>
<p id="demo"></p>
<script>
'use strict';
var tO;
function myFunction() {
var min = 0, max = 8;
var rand = Math.floor(Math.random() * (max - min + 1) + min); //Generate Random number between min/max
tO=setTimeout(myFunction, rand * 1000);
document.getElementById("demo").innerHTML = (rand + " " +"<BR>");
}
startIt.onclick=function(){
startIt.disabled = true;
myFunction();
}
stopIt.onclick=function(){
clearTimeout(tO);
startIt.disabled = false;
}
</script>
</body> </html><i>
</i>``