So, I got an infinite loop to work in this function using setInterval attached to an onClick. Problem is, I can't stop it using clearInterval in an onClick. I think this is because when I attach a clearInterval to an onClick, it kills a specific interval and not the function altogether. Is there anything I can do to kill all intervals through an onClick?
Here's my .js file and the calls I'm making are
input type="button" value="generate" onClick="generation();
input type="button" value="Infinite Loop!" onclick="setInterval('generation()',1000);"
input type="button" value="Reset" onclick="clearInterval(generation(),80;" // This one here is giving me trouble.
setInterval returns a handle, you need that handle so you can clear it
easiest, create a var for the handle in your html head, then in your onclick use the var
// in the head
var intervalHandle = null;
// in the onclick to set
intervalHandle = setInterval(....
// in the onclick to clear
clearInterval(intervalHandle);
http://www.w3schools.com/jsref/met_win_clearinterval.asp
clearInterval is applied on the return value of setInterval, like this:
var interval = null;
theSecondButton.onclick = function() {
if (interval === null) {
interval = setInterval(generation, 1000);
}
}
theThirdButton.onclick = function () {
if (interval !== null) {
clearInterval(interval);
interval = null;
}
}
Have generation(); call setTimeout to itself instead of setInterval. That was you can use a bit if logic in the function to prevent it from running setTimeout quite easily.
var genTimer
var stopGen = 0
function generation() {
clearTimeout(genTimer) ///stop additional clicks from initiating more timers
. . .
if(!stopGen) {
genTimer = setTimeout(function(){generation()},1000)
}
}
}
Live demo
This is all you need!
<script type="text/javascript">
var foo = setInterval(timer, 1000);
function timer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
$(document).on("click", "#stop_clock", function() {
clearInterval(foo);
$("#stop_clock").empty().append("Done!");
});
</script>
Related
let timer = document.querySelector("#timer");
var counter = 3;
function myFn() {
counter--
if (counter === -1) {
counter = 3
}
timer.innerText = counter
}
btn.onclick = function() {
text.innerHTML += 'clicked' + '<br>'
}
var myTimer = setInterval(myFn, 1000);
<div id="timer"></div>
<button id="btn">Button</button>
<div id="text"></div>
I'm trying with this small code to read the div#timer every second and check for a click condition in console.log() F12. It gives me different error in every way I try to do it.
let timer = document.querySelector("#timer");
let btn = document.querySelector("#btn");
setInterval(() => {
console.log(timer.textContent)
if (timer.textContent === '0') {
btn.click()
}
}, 1000);
Consider the following jQuery example.
$(function() {
var timer = 0;
var counter = 3;
var timeObj = $("#timer");
var btnObj = $("#btn");
var txtObj = $("#text");
var interval;
function myFn() {
if (--counter >= 0) {
txtObj.append("Clicked<br />");
} else {
clearInterval(interval);
}
}
interval = setInterval(function() {
timeObj.html(++timer);
}, 1000);
btnObj.click(myFn);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timer">0</div>
<button id="btn">Button</button>
<div id="text"></div>
You will want to use setInterval() and not setTimeout().
The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval().
See more: https://developer.mozilla.org/en-US/docs/Web/API/setInterval
Using the -- and ++ before the variable will also apply the change before it is used.
The decrement operator (--) decrements (subtracts one from) its operand and returns the value before or after the decrement, depending on where the operator is placed.
Adjusting the logic here can also ensure that the button click does allow the user to keep performing actions.
I'm trying the make a chrome extension in javascript. So far, my popup.js looks like this:
let bg;
let clock;
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('button1').addEventListener('click', butClicked);
bg = chrome.extension.getBackgroundPage();
//clock = document.getElementById("label1");
});
let timeStamp;
let isClockRunning = false;
function butClicked() {
let test = bg.getURL();
document.getElementById('test').innerHTML = test;
timeStamp = new Date();
isClockRunning = !isClockRunning;
runCheckTimer();
}
function runCheckTimer() {
var handle;
if(isClockRunning == true) {
handle = setInterval(updateClock, 1000);
}
else if(isClockRunning == false) {
clearInterval(handle);
handle = 0;
}
}
function updateClock() {
let seconds = bg.returnTimeSince(timeStamp);
document.getElementById("label1").innerHTML = "Seconds: " + seconds;
}
The program works just fine when I click the button once; it starts the timer. But when I click the button the second time, timeStamp gets set to 0, but the updateClock keeps running at the same interval; the interval doesn't get cleared even though I'm toggling the isClockRunning boolean. It's almost as if javascript is forgetting to run the else if part in runCheckTimer(). How can I fix this?
EDIT: On a sidenote, am I doing the timer thing the right way? Or is there a better way to do it? I basically want a timer to keep ticking every second since you've pressed the button, and then when you click it again it'll stop and reset to 0.
You have scoped handle to runCheckTimer. When runCheckTimer starts, it will create a new handle every time.
Move handle outside of the function.
var handle;
function runCheckTimer() {
if(isClockRunning == true) {
handle = setInterval(updateClock, 1000);
}
else if(isClockRunning == false) {
clearInterval(handle);
handle = 0;
}
}
I was working on a Timer code and its working fine but I'm unable to trigger on button click. I believe there is a silly mistake that I'm not able to figure out and was looking for help.
When I click on button, I get following error in console.
Uncaught ReferenceError: startTimer is not defined
I even have tried using $(document).ready() and defined functions in it still no luck.
Code
function timer(){
var time = {
sec:00,
min:00,
hr:00
}
var max = 59;
var interval = null;
function update(str){
time[str]++;
time[str] = time[str]%60;
if(time[str] == 0){
str == "sec"? update("min"):update("hr");
}
print(str);
}
function print(str){
var _time = time[str].toString().length == 1?"0" + time[str]:time[str];
document.getElementById("lbl"+str).innerText = _time;
}
function initInterval(){
interval = setInterval(function(){
update("sec");
},1000);
}
function stopTimer(){
clearInterval(interval);
}
return {
'init': initInterval,
'stop': stopTimer
}
};
var time = new timer();
function startTimer(){
time.init();
}
function endTimer(){
time.stop();
}
<div>
<span id="lblhr">00</span>
: <span id="lblmin">00</span>
: <span id="lblsec">00</span>
</div>
<button onclick="startTimer()">Start</button>
<button onclick="endTimer()">Stop</button>
I'm looking for pure JS solution, and not JQuery($(btnId).on("click")).
Link to JSFiddle
As I mentioned in a comment, using innerText won't work in most browsers, use innerHTML. This should work:
function timer(){
var time = {
sec:00,
min:00,
hr:00
}
var max = 59;
var interval = null;
function update(str){
time[str]++;
time[str] = time[str]%60;
if(time[str] == 0){
str == "sec"? update("min"):update("hr");
}
print(str);
}
function print(str){
var _time = time[str].toString().length == 1?"0" + time[str]:time[str];
document.getElementById("lbl"+str).innerHTML = _time;
}
function initInterval(){
interval = setInterval(function(){
update("sec");
},1000);
}
function stopTimer(){
clearInterval(interval);
}
return {
'init': initInterval,
'stop': stopTimer
}
};
var time = new timer();
function startTimer(){
time.init();
}
function endTimer(){
time.stop();
}
<div>
<span id="lblhr">00</span>
: <span id="lblmin">00</span>
: <span id="lblsec">00</span>
</div>
<button onclick="startTimer()">Start</button>
<button onclick="endTimer()">Stop</button>
So, your jsfiddle doesn't work because jsfiddle isn't expecting you to assign the onclick event in the HTML section.
You need to migrate that to the javascript section. In the HTML you need to assign an id to each button. Then, in the javascript section, have something like
document.getElementById("bStart").onclick = startTimer;
I also noticed that you have startTimer_out() as a function, but your HTML is trying to call startTimer().
Looks like it may just a jsfiddle thing.
Hi here is my code i need to bind the values like,
output : test test test
here is my code but working,
<script type="text/javascript">
function delayMsg2() {
var timer = null;
if (timer == null)
{
timer = setInterval(rudy(), 1000);
}
else
{
clearInterval(timer);
timer = null;
}
}
function rudy()
{
document.getElementById("output2").innerHTML = document.getElementById("output2").innerHTML + " test";
}
</script>
<div>
<button onclick="delayMsg2();" >Click me!</button>
<span id="output2"></span>
</div>
what i need to change
Reference your function rudy directly:
timer = setInterval(rudy, 1000);
No need to write a closure around, like in the other answers.
Whats wrong with your code? You execute rudy() at the moment your delay2msg is executed and you pass the return value (which is void), to the setInterval() method. Not good :)
Changed your line
timer = setInterval(rudy(), 1000);
To
timer = setInterval(function(){rudy();}, 1000);
Updated Demo
You have to fix your setInterval declaration
timer = setInterval(function(){rudy()}, 1000);
Here is a fiddle.
change your code with this one and this will solve your problem of start/stop interval also.
var timer = null;
function delayMsg2() {
if (timer == null) {
timer = setInterval(rudy, 1000);
} else {
clearInterval(timer);
timer = null;
}
}
function rudy() {
document.getElementById("output2").innerHTML = document.getElementById("output2").innerHTML + " test";
}
DEMO
So, I got an infinite loop to work in this function using setInterval attached to an onClick. Problem is, I can't stop it using clearInterval in an onClick. I think this is because when I attach a clearInterval to an onClick, it kills a specific interval and not the function altogether. Is there anything I can do to kill all intervals through an onClick?
Here's my .js file and the calls I'm making are
input type="button" value="generate" onClick="generation();
input type="button" value="Infinite Loop!" onclick="setInterval('generation()',1000);"
input type="button" value="Reset" onclick="clearInterval(generation(),80;" // This one here is giving me trouble.
setInterval returns a handle, you need that handle so you can clear it
easiest, create a var for the handle in your html head, then in your onclick use the var
// in the head
var intervalHandle = null;
// in the onclick to set
intervalHandle = setInterval(....
// in the onclick to clear
clearInterval(intervalHandle);
http://www.w3schools.com/jsref/met_win_clearinterval.asp
clearInterval is applied on the return value of setInterval, like this:
var interval = null;
theSecondButton.onclick = function() {
if (interval === null) {
interval = setInterval(generation, 1000);
}
}
theThirdButton.onclick = function () {
if (interval !== null) {
clearInterval(interval);
interval = null;
}
}
Have generation(); call setTimeout to itself instead of setInterval. That was you can use a bit if logic in the function to prevent it from running setTimeout quite easily.
var genTimer
var stopGen = 0
function generation() {
clearTimeout(genTimer) ///stop additional clicks from initiating more timers
. . .
if(!stopGen) {
genTimer = setTimeout(function(){generation()},1000)
}
}
}
Live demo
This is all you need!
<script type="text/javascript">
var foo = setInterval(timer, 1000);
function timer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
$(document).on("click", "#stop_clock", function() {
clearInterval(foo);
$("#stop_clock").empty().append("Done!");
});
</script>