We Keep Coding

SessionStorage and reloading page javascript

I'm trying to keep information (timer) in sessionStorage key.
I would like to keep timer runing if user reload the page.
I tried something like this
var timer = 50;
sessionStorage.setItem('timer_station', timer);
var timer_data = sessionStorage.getItem('timer_station');
var interval = setInterval(function () {
timer_data--;
console.log(timer_data);
$('#count-timer').text(timer_data);
if (timer_data === 0) {
$('#count-timer').text('Désolé, votre réservation a expirée');
clearInterval(interval);
sessionStorage.clear();
}
}, 1000);
},
But when i'm reloading the page, timer reset.
Thanks a lot :)

Firstly we need to handle the case that they haven't been here before:
var timer = sessionStorage.getItem('timer_station');
if (!timer){
timer = 50
}
Then do our interval, saving the new time left as we go:
var interval = setInterval(function () {
timer--;
console.log(timer);
sessionStorage.setItem('timer_station', timer);
$('#count-timer').text(timer);
if (timer === 0) {
$('#count-timer').text('Désolé, votre réservation a expirée');
clearInterval(interval);
sessionStorage.clear();
}
}, 1000);

This is because you're setting the timer_station value on each reload. You want to move the setItem into an if check. Something like...
var interval = setInterval(function () {
if (isThereATimerStationAlreadySetCheck) {
//do stuff with it
} else {
//set it
}
}, 1000);

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);
});

clearInterval does not work

I'm trying to create a simple countdown timer. It counts down from the number entered.
However, I'm trying to clear the interval when the counter gets to 0. At the moment it seems to acknowledge the if statement, but not clearInterval().
http://jsfiddle.net/tmyie/cf3Hd/
$('.click').click(function () {
$('input').empty();
var rawAmount = $('input').val();
var cleanAmount = parseInt(rawAmount) + 1;
var timer = function () {
cleanAmount--;
if (cleanAmount == 0) {
clearInterval(timer);
}
$('p').text(cleanAmount);
};
setInterval(timer, 500);
})

You're not saving the return value of the call to setInterval, which is the value that needs to be passed to clearInterval. Passing the timer handler does no good.
var timer, timerHandler = function () {
cleanAmount--;
if (cleanAmount == 0) {
clearInterval(timer);
}
$('p').text(cleanAmount);
};
timer = setInterval(timerHandler, 500);

Javascript Skippng Code

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);
}

Why doesn't this simple JavaScript increment and decrement method work?

(function() {
var count = {
digit: 0,
increment: function() {
var interval = setInterval(function() {
if (++count.digit == 10) {
clearInterval(interval);
count.decrement();
}
var update = document.getElementById("liveUpdate");
update.innerHTML = count.digit;
}, 500);
},
decrement: function() {
var interval = setInterval(function() {
if (--count.digit == -1) {
clearInterval(interval);
}
}, 500);
}
};
count.increment();
})();
It stops but it doesn't go down? What could be the problem?

Your decrement function never updates the output anywhere. The variable is going down but you don't show that on screen.
Try (or check the corresponding JSFiddle):
(function() {
var update = document.getElementById("liveUpdate");
var count = {
digit: 0,
increment: function() {
var interval = setInterval(function() {
if (++count.digit == 10) {
clearInterval(interval);
count.decrement();
}
update.innerHTML = count.digit;
}, 500);
},
decrement: function() {
var interval = setInterval(function() {
if (--count.digit == -1) {
clearInterval(interval);
}
update.innerHTML = count.digit;
}, 500);
}
};
count.increment();
})();

setInterval will call the function every 500 seconds. It will not stop until you stop it. You can read more about stopping it at Stop setInterval call in JavaScript

It't not a bug, it's a feature ;-). setInterval() runs the given function in a loop with a given interval (500 ms). See this article for details.