Develop Reference

How to use setInterval to trigger a function so that I can stop it at some point?

So from what I have understood, setInterval() is used to call a function on repeat on regular intervals.
So basically it is a loop that executes a function forever periodically.
I am confused as to if I had to stop this execution at one point what would be the way to do it
for eg I am trying to print the message "hey" 3 times after 1 second each, but somehow it is printing it 3 times every second and is going on forever.
What can I do to stop it after a set number of times.
This is the code that I've been trying
var i = 3;
function message() {
console.log("hey");
}
while(i > 0) {
setInterval(message, 1000);
i = i - 1;
}

Your code is executing the setInterval thrice in the while loop, which is not needed.
Actually, setInterval does not work as a function call but actually registers a function to be called at some interval.
The setInterval() method will continue calling the function until clearInterval() i.e it is deregistered or the process is killed.
It should work like this
var i = 3;
var interval = setInterval(message, 1000);
function message() {
if (i === 0) {
clearInterval(interval);
}
console.log("hey");
i = i - 1;
}

To clear a setInterval, use global clearInterval method.
Example:
var timerId = setInterval(func, 500);
.... some code here....
clearInterval(timerId);

What can I do to stop it after a set number of times.
usually you don't use setInterval() for this, you use setTimeout().
Something like
var counter = 0;
function message() {
console.log("hey");
// we trigger the function again after a second, if not already done 3 times
if (counter < 3) {
setTimeout(message, 1000);
}
counter++;
}
// initial startup after a second, could be faster too
setTimeout(message, 1000);

The setInterval function calls the function indefinitely, whereas setTimeout calls the function once only.
Simply use clearInterval once the count runs out.
var i = 3;
function message(){
console.log("hey");
if (--i < 0) {
clearInterval(tmr);
}
}
var tmr = setInterval(message, 1000);

you have to assign that setInterval to a javascript variable to name it what for this setInterval, like this
var messageLog = setInterval(message, 1000);
After, in setInterval message function add this condition to clear the inverval whenever you want to clear.
function message(){
if(i>3) {
clearInterval(messageLog); // clearInterval is a javascript function to clear Intervals.
return null;
}
console.log("hey");
}

You can retrieve the timer when creating and clear it if needed.
var i=3;
var timer = setInterval(message,1000);
function message(){
console.log("hey");
i—-;
if(i==0)
clearInterval(timer)
}

a beginner here too,look for clearInterval method ...

setInterval call to function with other arg

I have a function called "showCustomer" that get number between 1-5 and return something.
I want to use setInterval, to run this function every 5 second but with another number.
Its not working, i don't understand why its not working to me. here is the code.
setInterval(function () {
var i = 1;
showCustomer(i);
i++;
}, 5000);

Just move the declaration of variable i before the setInterval() call:
var i = 1;
setInterval(function () {
showCustomer(i);
i++;
}, 5000);
The anonymous function you've set as a callback for setInterval gets called every 5 seconds in your code. In every call, you're setting i to 1 which resets it every time.
Moving i outside the setInterval callback makes it persist the the current value.

Every time you use var, you redeclare the value of that variable. So you only should declare the counter one time.
Every time that the browser calls the callback showCustomer the if statement evaluates if the browser should make a new call.
clearInvertal() it's the method to stop the setInterval() method.
var id = 1;
var show5times = window.setInterval(showCustomer, 5000);
function showCustomer() {
alert(id);
id++;
if(id > 5) {
window.clearInterval(show5times);
}
}

Settimeout and ClearTimeout

i need to restart a setTimeout after stopping it with a clearTimeout
the code is like:
function start(){timeout = setTimeout(function(){...}, 1000}
function increment(){interval();}
function stop(){clearTimeout(timeout)}
better explained:
function start() is a timeout of 1000ms for another function that recall start().
function increment() just add +1 to a value every 1000s but it doesn't matter with the problem.
the last function stop() stops the setTimeout in the function start().
i need to stop the setTimeout in start() for just 1000ms and then let it continue working.

ok.... i "avoid" the problem....
i need to stop the setTimeout for 1000ms and then let it works normally...
i tried so... instead of pausing the setTimeout I put another time var.
var time = 1000;
var timecache = 1000;
fatica = 3000;
sudore = 3000;
function interval() { timeout = setTimeout(increment, time);} //here setTimeout uses var time//
function increment(){console.log(time);point += 1;document.getElementById("pul").value = point;interval();}
function fermafatica() {time = timecache;setInterval(ferma, fatica);} //here the function equals time to timecache so vas time is always 1000ms//
function ferma(){time = 10000; setTimeout(fermafatica, sudore);} // then here I transformed the time in 10000 so the first function will take 10000 instead of 1000 in setTimeout//
//plus i put a setTimeout to recall function fermafatica() that reset the time to 1000//
this i what i want... I avoid the problem and found another way to do that... but it works... thank you anyway

How to stop a setTimeout for a decided time

var time = 1000;
var point = 0;
function interval() { timeout = setTimeout(increment, time);}
function increment(){point += 1;document.getElementById("pul").value = point;interval();}
time2 = 3000;
function fermafatica() {setInterval(ferma, time2);}
function ferma(){clearTimeout(timeout)}
i need to stop the interval() function or the setTimeout in interval() for only 1000ms and then to keep it working

Are you asking about how to clear a timeout after X seconds? I would consider just having a static variable (lets just call it X) count up within the repeating function, and if the function repeats every 10ms, and you want it to run for 1000ms, then when x==100, clear the timeout.

You could try:
setTimeout(function() {
z();
// Do anything else here
}, 1000);
The setTimeout function, runs the given function after a set amount of time. This will call the z() function, which clears your timeout, after the supplied time of 1000ms.
EDIT: Everything: See below
var time = 1000;
var point = 0;
function interval() { timeout = setTimeout(increment, time);}
function increment(){point += 1;document.getElementById("pul").value = point;interval();}
time2 = 3000;
function fermafatica() {setInterval(ferma, time2);}
function ferma(){clearTimeout(timeout)}
Change function fermafatica() {setInterval(ferma, time);}
to function fermafatica() {setTimeout(ferma, time);}

ok.... i "avoid" the problem.... i need to stop the setTimeout for 1000ms and then let it works normally... i tried so... instead of pausing the setTimeout I put another time var.
var time = 1000;
var timecache = 1000;
fatica = 3000;
sudore = 3000;
function interval() { timeout = setTimeout(increment, time);} //here setTimeout uses var time//
function increment(){console.log(time);point += 1;document.getElementById("pul").value = point;interval();}
function fermafatica() {time = timecache;setInterval(ferma, fatica);} //here the function equals time to timecache so vas time is always 1000ms//
function ferma(){time = 10000; setTimeout(fermafatica, sudore);} // then here I transformed the time in 10000 so the first function will take 10000 instead of 1000 in setTimeout//
//plus i put a setTimeout to recall function fermafatica() that reset the time to 1000//
this i what i want... I avoid the problem and found another way to do that... but it works...

SetInterval and clearInterval explanation

var fps = 30;
var drawInterval;
imageSprite.addEventListener('load',init,false);
function init() {
drawBg();
startDrawing();
}
function draw() {
clearJet();
drawJet();
}
function startDrawing() {
stopDrawing();
drawInterval = setInterval(draw,1000 / fps);
}
function stopDrawing() {
clearInterval(drawInterval);
}
Can anybody explain why do we execute the function stopDrawing() before drawInetrval and how will this code execute.

Essentially with clearInternal you are stopping the interval referenced by drawInterval.
You could look at it as if it were setting drawInterval = null.
That is done to prevent multiple intervals firing: each time startDrawing is called, you reset the current ongoing interval and start a new one that will fire in 1000/fps milliseconds, i.e. drawInterval will fire 1000/fps milliseconds after startDrawing is called for the last time.

It is simply clearing the interval so that you are not running multiple intervals at the same time.