Javascript Skippng Code - javascript

So I'm trying to create an animate using javascript and what I'm doing is showing an image, wait one second, show the second, wait, show and so on.
For some reason the first image shows, when I click to change it it jumps to the second one.
My first image looks like
<img src="img/board/1.png" id="spinner" alt="Click Me!" onclick="c1()"> </img>
And then I change the images using this.
function c1() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/2.png";}, 1000);
c2();
}
function c2() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/3.png";}, 1000);
c3();
}
function c3() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/4.png";}, 1000);
c4();
}
function c4() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/5.png";}, 1000);
c5();
}
function c5() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/6.png";}, 1000);
c6();
}
function c6() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/7.png";}, 1000);
c7();
}
function c7() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/8.png";}, 1000);
c8();
}
function c8() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/9.png";}, 1000);
//c9();
}
function c9() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/10.png";}, 1000);
}
Why is it skipping the images in between.

All of your functions are being executed immediately, and each of them is setting a timeout at roughly the same time. Then, 1000ms later, all the timeouts are executing. The invocation of the next function is the thing that needs to be delayed by 1000ms, not the animation itself.
Instead of this:
function c1() {
setTimeout(function () { animateSomething1() }, 1000)
c2();
}
function c2() {
setTimeout(function () { animateSomething2() }, 1000);
c3() ...
}
You need this:
function c1() {
animateSomething1();
setTimeout(function () { c2(); }, 1000)
}
function c2() {
animateSomething2()
setTimeout(function () { c3() }, 1000);
}
Note that your animation is ideally suited to a single function which just increments an index and invokes itself:
function advanceSpinner(i) {
i = i || 1;
if (i > 10)
i = 1; // change this to return if you don't want to run forever
document.getElementById("spinner").src = "img/board/" + i + ".png";
setTimeout(function () { advanceSpinner(i + 1) }, 1000);
}

you should ad function into timeout itself rather than keeping them outside. like
function c8() {
setTimeout(function(){document.getElementById("spinner").src = "img/board/9.png";c9();}, 1000);
}

Related

How to kill and restart the recursive function in javascript

I am working on knockout js.
In that i have a recursive function which executes a function every minute. for that am using a timer every 60 sec it will execute also same will be reflecting in the UI also.
In my case, if i try to assign or initialize a timer value(observable) which is inside a loop, it doesn't reflecting instead of reflecting it is added to the pipeline and that much time loop is running simultaneously.
In that case i want to kill the loop and again want to restart every time i am changing the timer value.
timerInSec=60;
var loop = function () {
if (this.timer() < 1) {
myFunction()
this.timer(this.timerInSec - 1);
setTimeout(loop, 1000);
} else {
this.timer(this.timer() - 1);
setTimeout(loop, 1000);
}
};
loop();
Here is my solution. Please check.
timerInSec = 60;
const Loop = (function () {
let timer = 0;
let timerId = -1;
const myFunction = function () {
console.log('finished');
}
const fnLog = function (tm) {
console.log('current time = ', tm);
}
const fnProc = function () {
timerId = setTimeout(myFunction, 1000 * timer);
}
return {
start: function (tm = 60) {
this.stop();
timer = tm;
fnProc();
},
stop: function () {
if (timerId !== -1) {
clearTimeout(timerId);
timerId = -1;
}
}
}
})();
Loop.start(timerInSec);
setTimeout(() => {
Loop.start(timerInSec);
}, 500);

How to clear nested setInterval inside setTimeout

this is my code, which works but i don't know how to clear timeout and clearinterval
setTimeout(function(){
setInterval( function(){
if (Math.random()> 0.1){
countdown.extendTimer(-3)
console.log("im dying")
}
}, 1000)
}, 10000)
this is what i have tried, but the diseaseInterval() just starts immediately without waiting for 5 sec
function diseaseInterval(){
if (Math.random()> 0.1){
countdown.extendTimer(-3)
console.log("im dying")
}
}
function diseaseTimeout(){
setInterval( diseaseInterval(),1000)
}
var onDisease = setTimeout(diseaseInterval(),5000)
This time i tried clearInterval inside clearTimeout itself, but it still doesn't work
var onDisease = setTimeout(function(){
disease = true;
var diseaseInterval = setInterval( function(){
if (Math.random()> 0.1){
countdown.extendTimer(-3)
console.log("im dying")}
else if (disease=false) {
clearInterval(diseaseInterval);
}
}, 1000)
}, 10000)
function cure(){
clearTimeout(onDisease);
disease = false
}

hold down button after 1 second and loop the action using jQuery

I got this code from: Jquery: mousedown effect (while left click is held down)
It is behaving that if I am holding the button in every 50ms it will do something.
var timeout = 0;
$('#button_add').mousedown(function () {
timeout = setInterval(function () {
value_of_something ++;
}, 50);
return false;
});
});
But what I want is to execute this part after holding down the button by 1 second and it will continuously do the action 50ms.
As I said you need to use setTimeout()
var timeout = 0;
$('#button_add').mousedown(function () {
setTimeout(function(){
timeout = setInterval(function () {
value_of_something ++;
}, 50);
} , 1000);
return false;
});
Jsfiddle
Please use this code... You have to clearTimeout when user mouseup :
var timeout = 0;
$('#button_add').mousedown(function() {
oneSecondTimer = setTimeout(function() {
timeout = setInterval(function() {
value_of_something++;
}, 50);
}, 1000);
return false;
});
$("#button_add").mouseup(function() {
clearTimeout(oneSecondTimer);
});

jQuery add remove class on list with a delay in between

I would like to add a class to a div, then remove the class and move on to the next div and do the same. The following works almost perfectly:
var f = jQuery('.ls-slide').find('div.main-img-label');
function recursive(i) {
f.removeClass('blue-flash').eq(i).addClass('blue-flash');
setTimeout(function () {
recursive(++i % f.length)
}, 3000);
}
recursive(0);
Only difference is that I would like a delay in time between the removal of the class and the addition of the class on the next item.
For example the div.main-img-label is a red circle, the class blue-flash changes the circle to blue. But it looks like the blue moves from one to another and I would like one to turn blue, then them all be red again before another circle turns blue.
function recursive(i) {
f.removeClass('blue-flash');
setTimeout(function () {
f.eq(i).addClass('blue-flash');
}, 1000);
setTimeout(function () {
recursive(++i % f.length)
}, 3000);
}
or
function recursive(i) {
f.removeClass('blue-flash');
setTimeout(function () {
f.eq(i).addClass('blue-flash');
setTimeout(function () {
recursive(++i % f.length)
}, 2000);
}, 1000);
}
UPDATE: fiddle here: https://jsfiddle.net/robbyn/9ya46tj4/
Maybe you can try to add some extra delay in each iteration...
[Updated code]
function flashLoop(){
var timeout = (1000 * $('.main-img-label').length);
setInterval(function(){
$.each($('.main-img-label'), function(i, el){
setTimeout(function(){
$(el).addClass('blue-flash');
setTimeout(function(){
$(el).removeClass('blue-flash');
},500);
},1000 + ( i * 1000 ));
});
}, timeout);
}
flashLoop();
How about using the jQuery's delay() method?
https://api.jquery.com/delay/
Something like:
var f = jQuery('.ls-slide').find('div.main-img-label');
function recursive(i) {
f.removeClass('blue-flash').delay(800)
.eq(i).addClass('blue-flash');
setTimeout(function () {
recursive(++i % f.length)
}, 3000);
}
recursive(0);

Resetting setinterval in JS

Code looks like that:
function startTimer(counter) {
var interval = setInterval(function () {
counter--;
$('#timer').html(counter);
// Display 'counter' wherever you want to display it.
if (counter == 0) {
clearInterval(interval);
$('#question').html("Time ended");
setTimeout(function () {
window.location.href = "/";
}, 5000);
return false;
}
}, 1000);
}
What I want to do is, when I call this function multiple times, every time to reset timer to 30 seconds and kill all past instances. Currently it messes up with past intances when I call multiple times. What am I doing wrong?
You have to define the var interval outside the function:
var interval;
function startTimer(counter) {
interval = setInterval(function () {
counter--;
$('#timer').html(counter);
// Display 'counter' wherever you want to display it.
if (counter == 0) {
clearInterval(interval);
$('#question').html("Time ended");
setTimeout(function () {
window.location.href = "/";
}, 5000);
return false;
}
}, 1000);
}

Categories