I'm working on a timer, and would like the setInterval() operation to terminate when the counter reaches zero. Further, I would like the function to be "turned off" if you will, so that I can reset the value that is fed into the timer, without the timer starting to decrement again.
When I configure the code like this:
function countdown(){
var intervalKill = setInterval(function(){
var start = document.getElementById("startValue").innerHTML;
if (start > 1){
var time_left = start - 1;
document.getElementById("startValue").innerHTML = time_left;
} else if (start === 1) {
clearInterval(intervalKill)
}
}, 1000);
}
I get it running perfectly well, however if it reaches 1, and I reset the timer, it will start counting down instantly again.
When I code it like this:
function countdown(){
var intervalKill = setInterval(function(){
var start = document.getElementById("startValue").innerHTML;
if (start > 1){
var time_left = start - 1;
document.getElementById("startValue").innerHTML = time_left;
} else if (start === 1) {
clearInterval(intervalKill);
break;
}
}, 1000);
}
The function just does not run at all. Can someone shed some light on what is going on here and how to get it to work?
function countdown(){
var intervalKill = setInterval(function(){
var start = document.getElementById("startValue").innerHTML;
if (start > 1){
var time_left = start - 1;
document.getElementById("startValue").innerHTML = time_left;
} else if (+start === 1) {
clearInterval(intervalKill);
// break; <-- not necessary
}
}, 1000);
}
Either parse the start to integer using unary + or parseInt or use == instead of === since the latter checks for type information as well.
innerHTML returns a string.
Related
I've got the following jQuery code which I use in a Bookmarklet. It clicks on all the buttons on the page (with the class "Unfollow") one by one, with a random time between each one...
javascript: (function() {
var unfollowButtons = $('button.Unfollow');
var index = unfollowButtons.length - 1;
unfollow();
function unfollow() {
if (index >= 0) {
$(unfollowButtons[index--])
.click();
setTimeout(unfollow, Math.floor((Math.random() * 1000) + 500));
}
}
})();
I'd like to run the above function again twice once it has completed its cycle.
Just running the function again causes that to run in parallel with the first function call.
How do I run the unfollow() function 2 or 3 times without them all running in parallel?
Try it this way (using ES6 Promises):
var runUnfollow = function() {
return new Promise(function(resolve, reject){
var index = unfollowButtons.length - 1;
// fencepost for the loop
var p = Promise.resolve();
// we stop execution at `i == 0`
for (var i = index; i >= 0; i--) {
// run the promise
// then set `p` as the next one
p = p.then(unfollowTimeout.bind(null, i));
}
// make sure we run the last execution at `i == 0`.
p.then(function(){
resolve();
})
function unfollowTimeout(i){
// return a promise to run `unfollow` and a `setTimeout`
return new Promise(function(resolve,reject){
unfollow(i);
setTimeout(resolve, Math.floor((Math.random() * 1000) + 500));
})
}
function unfollow(i) {
$(unfollowButtons[i])
.click();
}
})
}
// run three times synchronously
runUnfollow().then(runUnfollow).then(runUnfollow).then(function(){
//finished
});
// another way to run three times synchronously
p = runUnfollow();
for(i=3; i > 0; i--){
p = p.then(runUnfollow);
}
p.then(function(){
//finished
});
// run in parallel
Promise.all([runUnfollow, runUnfollow, runUnfollow])
.then(function(){
//finished
});
EDIT: Went back and read your question again, realized you were trying to run everything multiple times. I've edited to reflect that.
Just reset index and restart after each button is clicked:
javascript: (function() {
var unfollowButtons = $('button.Unfollow');
var index = unfollowButtons.length - 1;
var totalRuns = 3;
unfollow();
function unfollow() {
if (index < 0 && totalRuns) {
totalRuns--;
unfollowButtons = $('button.Unfollow');
index = unfollowButtons.length - 1;
}
if (index >= 0) {
$(unfollowButtons[index--])
.click();
setTimeout(unfollow, Math.floor((Math.random() * 1000) + 500));
}
}
})();
You should look at Promises.
Resolve your Promise at your function's execution's very end and call your function again. You should be good with that.
In your specific case, you could simply build an array which contains twice each button :
// turn the jQuery selection into a regular array :
var unfollowButtons = $('button.Unfollow').get();
// build a new array, which contains two copies of the above selection :
unfollowButtons = unfollowButtons.concat(unfollowButtons);
You have 2 options
1.Use a User Script
For that, you need a User Script extension manager, for example Tampermonkey for Chrome, Greasemonkey for Firefox, etc.
But since you want a bookmarklet, just leave it.
2.Modify the Bookmarklet a little as follows
Add this code inside the unfollow function
That is check whether index reached 0 and also the flag is set or not.
FLAG is important otherwise it will create a infinitive recursion loop.
First set FLAG to 0 outside of unfollow function.
Then in unfollow function, if the FLAG is 0 and index is 0, initiate the next iteration and Set FLAG to 1.
if(index < 0 && FLAG==0){
var unfollowButtons = $('button.Unfollow');
FLAG=1;
var index = unfollowButtons.length - 1;
unfollow();
}
So, it will look like this.
javascript: (function() {
var unfollowButtons = $('button.Unfollow');
var index = unfollowButtons.length - 1;
var FLAG=0;
unfollow();
function unfollow() {
if (index >= 0) {
$(unfollowButtons[index--])
.click();
if(index < 0 && FLAG==0){
unfollowButtons = $('button.Unfollow');
FLAG=1;
index = unfollowButtons.length - 1;
unfollow();
}
setTimeout(unfollow, Math.floor((Math.random() * 1000) + 500));
}
}
})();
If you want to do it totally 3 times, change if(index < 0 && FLAG<=2){ and FLAG=1 to FLAG +=1
As i understand your requirements it can be done like this :
javascript: (function() {
var unfollowButtons = $('button.Unfollow');
var index = unfollowButtons.length - 1;
unfollow();
var runForNoOfTime = 3;
var runningForTime = 1;
function unfollow() {
if (index >= 0) {
$(unfollowButtons[index--]).click();
setTimeout(unfollow, Math.floor(Math.random() * 1000) + 500));
}else if(runningForTime < runForNoOfTime){
runningForTime++;
unfollowButtons = $('button.Unfollow'); //if buttons with class 'Unfollow' changes.
index = unfollowButtons.length - 1;
setTimeout(unfollow, Math.floor(Math.random() * 1000) + 500));
}
}
})();
You can use recursion to achieve the desired effect of running your function multiple times sequentially. Here's how this can be done:
(function() {
var unfollowButtons = $('button.Unfollow');
var index = unfollowButtons.length - 1;
function unfollow(callback) {
if (index >= 0) {
$(unfollowButtons[index--]).click();
}
callback();
}
function handleUnfollow(maxIter, iter) {
iter = typeof iter === "number" ? iter : 0;
if ( iter >= maxIter ) {
// base case reached, stop further recursive calls
return true;
}
// call unfollow once
unfollow(function() {
setTimeout(function() {
// recursive call
handleUnfollow(maxIter, ++iter);
}, Math.floor((Math.random() * 1000) + 500));
});
}
// execute recursive function, which will iterate 2 times
handleUnfollow(2);
})();
As far as I'm aware Javascript runs on a single thread, so there is no actual parallel processing taking place.
If you just simply want the function to run itself x times then use recursion:
function DoSomething(steps) {
// Do stuff here
steps--;
if (steps <== 0) {
return;
}
DoSomething(steps);
}
If you want things to run in "parallel" with Javascript then perhaps you could look into having some external code that manages threads and executes multiple Javascript processes in parallel (although I'm not sure if this is possible, and, if it is, whether you'll be able to have the scripts accessing the same data at the same time or talking to eachother).
I have made the current code as block and added wrapper logic. Check if this works.
(function() {
var iterations = 2;
unfollowBlock();
function unFollowBlock() {
if (iterations-- >0) {
var unfollowButtons = $('button.Unfollow');
var index = unfollowButtons.length - 1;
unfollow();
function unfollow() {
if (index >= 0) {
$(unfollowButtons[index--])
.click();
setTimeout(unfollow, Math.floor((Math.random() * 1000) + 500));
}
else { //index=-1 end of unfollowblock
setTimeout(unFollowBlock, Math.floor((Math.random() * 1000) + 500));
}
}
}
}
})();
Declare a flag/check variable eg. var isCycleComplete;
var isCycleComplete = false;
if(isCycleComplete){ // if true runs unfollow function twice
unfollow();
unfollow();
isCycleComplete = false; // resets flag
}
else{ // if false
unfollow();
isCycleComplete = true; //sets flag to true
}
M not a pro at javascript but See if this simple snippet helps you.
For my site, I want the timer to begin counting down from 30 minutes immediately on page load and loop forever (until the user closes the page).
At the end of every 30 minute cycle, an alarm will go off. I have an mp3 file I will use. The alarm goes off, then the 30 minutes start again.
// I did it to solve the problem... Thanks all
window.loopingInterval = 30;
setInterval(loopingTimerMethod, 1000);
window.secondStart = 60;
window.loopingMinutes = loopingInterval - 1;
window.loopingSecond = secondStart;
function loopingStartTime(tim) {
var i = tim - 1;
return i;
}
function loopingTimerMethod()
{
loopingSecond = loopingStartTime(loopingSecond);
document.getElementById("timer-minutes").innerHTML = timeWithZero(loopingMinutes);
document.getElementById("timer-second").innerHTML = timeWithZero(loopingSecond);
if (loopingSecond == 0) {
if (loopingMinutes == 0 && loopingSecond == 0) {
var x = document.getElementById("myLoopingAudioPlayer");
LoopingPlayAudio(x);
window.loopingMinutes = loopingInterval;
}
loopingMinutes = loopingMinutes - 1;
loopingSecond = secondStart;
}
}
function LoopingPlayAudio(x) {
x.play();
}
function LoopingPauseAudio(x) {
x.pause();
}
function timeWithZero(i) {
if (i < 10) {
i = "0" + i
}
; // add zero in front of numbers < 10
return i;
}
/*END Timer Looping functionality*/
I'm writing some code that looks like this
<script type="text/javascript">
setInterval(function write_numbers(){
var count = 1;
var brk = "<br>"
while (count < 1218){
document.write(count + brk);
count++;
}},1000)
</script>
I need it to display the first number which is one then wait one second then display the next number (2) then wait a second, I need this to carry on till it reaches 1218 then stop.
With the code I've written it just writes all the numbers up, waits a second then repeats all the numbers again.
I'm quite new to coding so i don't know how to fix this.
If someone could tell me how to do it, it would be greatly appreciated.
There are multiple issues in your code, although you are using setInterval(), since you have a while loop inside it, the complete loop will be executed every 1 second.
Instead you need to have the setInterval() callback use an if statement to check whether to print the value or not like
var count = 1;
var interval = setInterval(function write_numbers() {
if (count <= 1218) {
document.body.appendChild(document.createTextNode(count));
document.body.appendChild(document.createElement('br'));
count++;
} else {
clearInterval(interval);
}
}, 1000)
The below script should do the trick for you:
<script>
var count = 1;
var brk = "<br>";
var myVar = setInterval(function(){ myTimer() }, 1000); // This should be a global variable for clearInterval to access it.
function myTimer() {
document.write(count + brk);
count++;
if(count > 1218){
myStopFunction();
}
}
function myStopFunction() {
clearInterval(myVar);
}
</script>
two issues
1) If you are using setInterval then you must clear the interval as well otherwise it will be an infinite loop
2) use if rather than while so that number is printed one by one.
try this
var count = 1;
var interval1= setInterval(function write_numbers(){
var brk = "<br>"
if (count < 1218)
{
document.write(count + brk);
count++;
}
else
{
count = 1;
clearInterval(interval1);
}
},1000);
First, you should define count outside setInterval. Defining inside will reset it every time.
Second, while (count < 1218){} should be a conditional statement. I have considered if(count>= 1218) as termination condition.
Third, when even you use setInterval, remember to use clearInterval as well.
Code
var count = 1;
var interval = setInterval(function write_numbers() {
var brk = "<br>"
document.write(count + brk);
count++;
if (count >= 10) {
window.clearInterval(interval);
}
}, 1000)
Try this code man , only one change from your code.
count variable declare out side of the setInterval function
<script type="text/javascript">
var count = 1;
setInterval(function write_numbers(){
var brk = "<br>"
if (count < 1218)
{
document.write(count + brk);
count++;
}
},1000);
</script>
I'm new to programming, so please don't be harsh with my skills. Anyways, here is my code, I'm attempting to make a simple countdown loop.
var number = 30;
var countdown = true;
while(countdown === true) {
subtract();
if(number === 0) {
countdown = false;
}
}
function subtract() {
setTimeout(function() {
console.log(number);
number = number - 1;
}, 1000);
}
What did I do wrong?
Javascript has function-level block execution. One function runs to completion before another function is given ability to execute. Your while loop is maintaining the execution baton, so the other functions in setTimeout are never given a chance.
although javascript is called asynchonous in this case it does not call the subtract function until the first one is finished. (details http://ejohn.org/blog/how-javascript-timers-work/)
this should work
var number = 30;
setTimeout(function() {
console.log(number);
number = number - 1;
}, 1000);
setInterval is the function to set a function to run periodically. https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval
var number = 30;
var countdown = true;
var timer;
function update(){
console.log(number);
number = number - 1;
if (number === 0)
clearInterval(timer);
}
timer = setInterval(update, 1000);
When using the setTimeout function you actualy call a function after X miliseconds (in this case X=1000, which is 1 second).
'While' is the function you want to do the countdown with, right? So in your subtract function just write:
console.log(number);
number = number - 1;
You can also drop the subtract function and just write:
while(countdown === true) {
console.log(number);
number = number - 1;
if(number === 0) {
countdown = false;
}
}
Or drop the while function:
function subtract() {
id(countdown === true)
setTimeout(function() {
console.log(number);
number = number - 1;
subtract();
}, 1000);
else countdown = false;
}
subtract();
I am working on a simple game right now. its almost done except for the timer has a glitch in it and I can't figure out whats doing it. when you push a button, an HTML5 text on the canvas starts to count down from 35 to 0. On the first run it's fine. But if you choose to play again with out refresh the timer starts to countdown faster. here is the code.
var timer = 35;
ctx.fillText("Countdown: " + timer, 320, 32);
function resetReggie(){
reggie.x = canvasWidth / 2;
reggie.y = canvasHeight / 2;
}
//Starts Timer for Timed Game
function timedMsg()
{
resetReggie();
ballsCaught = 0;
timer = 35;
alert('Pick up as many as you can in ' + timer + ' seconds');
countDown();
var t=setTimeout(function() {
var again = confirm("TIMES UP! You Gathered " + ballsCaught + " Balls! Play Again?");
if (again === true){
timedMsg();
resetReggie();
}
if (again === false){
resetReggie();
ballsCaught = 0;
timer = 35;
}
}, timer * 1000);
}
function countDown() {
if (timer != 0){
timer-=1;
setTimeout('countDown()', 1000);
}
}
I think the problem is in the line
}, timer * 1000);
where you have a value that is at most 34 at the time 'timer' is evaluated to set the timeout. Because you initialize it to 35 but then call countDown() which decreases it to 34, then you have a call to confirm() which might let 'timer' decrease even more. As a result the subsequent call to timedMsg() happens a little too soon causing countDown() to be called twice as often. Try the following (I ran it in node) and then change the 4 to 6.
function countDown() {
console.log("Countdown: " + timer, 320, 32);
if (timer != 0) {
timer -= 1;
setTimeout(countDown, 1000);
}
}
function timedMsg() {
timer = 5;
countDown();
var t=setTimeout(function() {
timedMsg();
}, 4 * 1000);
}
timedMsg();
As mentioned in my comment, each time you start a new game, it appears you are decreasing the timeout value. As a result, this reduces the time each time.
Try this:
var timeout = currentTime = 5;
var int = setInterval(function() {
console.log(currentTime);
currentTime--;
if(currentTime < 0) {
var again = confirm('Play again?');
if(again) {
currentTime = timeout;
}
else {
clearInterval(int);
}
}
}, 1000);
http://jsfiddle.net/gRoberts/CsyYx/
Look at your console (F12 in Chrome), or update the code to write to the browser to see it working ;)