Develop Reference

clearInterval does not reset the setinterval value

I'm making a slot machine simulator to learn javascript and messing around with setInterval() and clearInterval(). To simulate the slow stopping of the rows I set asetTimeout() to clear the Intervals of my 3 columns, but the timer doesn't reset the function is still called, I also tried a console log inside the setTimeout and the calls are correct 1sec after 2sec another log and then the third. what I'm doing wrong?
Here try the game and the full code with HTML: https://jsfiddle.net/orphtv1m/1/
//Here i initialize my setInterval
wheelIntervals[i] = setInterval(function(){
columns[i][numberStart[i]].style.background = "white";
numberStart[i] = (numberStart[i]+1)<10 ? numberStart[i]+1 : 0;
columns[i][numberStart[i]].style.background = "red";
},timer);
/*Code*/
setTimeout(function(){
//Here i try to clear it
console.log('Helo');
clearInterval(wheelIntervals[i]);
},i*1000);
}
setTimeout(endGame(), 3000);
}); ```

clearInterval(wheelInterval[i])
Will be always called with i equal to 2
Using setTimeout inside loops might be a little bit tricky because of closures.
Here is an explanation how to do it correctly: https://medium.com/#axionoso/watch-out-when-using-settimeout-in-for-loop-js-75a047e27a5f

retain differents setInterval with a cookie or localstorage?

I have an automatic mouse with a time interval when I go inside a web. But I have a button that increase that speed but of course when I refresh the page or I go to other part of the web the speed is the first one. I tried with a cookie but I don't know how to do it because by default cookies or localstorage works only with names...
// Default speed
$(document).ready(function() {
t = setInterval(clickbutton, 3000);
}
// Button
function aumentar() {
clearTimeout(t);
t = setInterval(clickbutton, 100);
}
I will be really grateful for your help because I'm going crazy.
Thanks a lot!

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.
The function is only executed once. If you need to repeat execution, use the setInterval() method.
Use the clearTimeout() method to prevent the function from running.
The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).
The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed.
HTML local storage; better than cookies.
Create a localStorage name/value pair with localStorage.setItem("name", "value")
Retrieve the value of "name" and insert it into the element with localStorage.getItem("name")
remove item localStorage.removeItem("name")
var t;
function speed(_speed, boo){
if(boo){
return localStorage.getItem("speed") || 3000;
} else {
localStorage.setItem("speed", _speed);
}
}
$(document).ready(function() {
t = setInterval(clickbutton, speed(true));
// Button
function aumentar() {
clearInterval(t);
speed(100);
t = setInterval(clickbutton, 100);
}
});

Javascript - call a function when you finish typing

Let's say I have an input in wich the user is going to type some text. When he finish typing I want to call a function automatically.
This is what I have done till now:
<input type="text" oninput="change();"/>
<script>
function changing(){
alert('You stoped typing!');
}
function change(){
clearTimeout(changing);
setTimeout(changing, 2000);
}
</script>
What I am expecting :
When you type, change is called. It cancels the last changing that was supposed to run in 2 seconds and run a new changing within 2 seconds.
What actually happens :
When you type, change is called. It doesn't cancel the last changing that was supposed to run in 2 seconds but still run a new changing within 2 seconds. As you type, the first alert window will appear 2 seccond after you start typing and keep showing again and again one after another.
Is there something wrong in my code?

setTimeout() returns a timer ID. It is that timer ID that you must pass to clearTimeout() for it to work properly (you are passing the callback function to clearTimeout() and that is not how it works).
So, you need to store the return value from setTimeout() into a variable in a lasting scope that you can then later pass to clearTimeout() like this:
<input type="text" oninput="change();"/>
<script>
function changing(){
alert('You stoped typing!');
}
var timer;
function change(){
clearTimeout(timer);
timer = setTimeout(changing, 2000);
}
</script>

The setTimeout() function returns a value that must be used later with clearTimeout() if you need to cancel it.
var timer;
function changing(){
alert('You stoped typing!');
}
function change(){
clearTimeout(timer);
timer = setTimeout(changing, 2000);
}

How can I reset a settimeout

I tried the answer here: Resetting a setTimeout, but it doesn't seem to be working for me.
I'm building a catalog viewer using Owl Carousel. I have a function set to go off on the afterMove event handler that shows what page the user is on. It displays the page counter and then sets a timeout to have it fadeout after 1 second. Probably is lots of people go through pages faster than once per second. So, I need to reset the timeout if the function gets called again.
function showCounter(){
var $counter = $('#counter');
//clear timeout
window.clearTimeout(timeout);
//Display counter
$counter.show();
//set timeout
var timeout = window.setTimeout(function(){
$counter.fadeOut(500);
}, 1000);
}
But window.clearTimeout(timeout) doesn't seem to be working and I'm not sure why
Thanks

var timeout inside the function makes timeout local to the function; thus, every time you call showCounter, timeout is undefined. Move the variable declaration out of the function:
var timeout;
function showCounter() {
// ...
timeout = // NO VAR! ...
// ...
}

java script for grease monkey loop

what i need is a for or while loop that will re run the code every second
ive tried sleep() but i dont think it is working or i have got it right

Do not try to use a for or while loop for such timed operations. You'll have a hard time with reliable or accurate timing and usually end up railing the CPU, making the computer sluggish.
JavaScript provides the setInterval() function for these kinds of tasks. Also note that Greasemonkey has some caveats about how to use setInterval() and setTimeout().
So the code you want is like:
var timerVar = setInterval (function() {DoMeEverySecond (); }, 1000);
function DoMeEverySecond ()
{
//--- Your code here.
}
//--- When ready to stop the timer, run this code:
clearInterval (timerVar);
timerVar = "";

try
// where yourfunction is a method that contains your loop logic
setTimeout(yourfunction, 1000);
This will invoke the function every 1000 milliseconds without having to embed it into a while or for loop.
put it into your body onload or similar event