We Keep Coding

avoiding setTimeOut loop multiple instances

I have a function like so:
https://jsfiddle.net/pjngaffo/1/
i=0;
function refreshInfos() {
if($('.main_dialog').length > 0) {
console.log('loop-->',i++);
setTimeout(function(){refreshManager()},1000);
}
}
$('.main_dialog').on('click',function(){
refreshInfos();
});
function refreshManager(){
//do stuff
//then call refreshInfos() for automatisation purposes
refreshInfos();
}
As you can see, if I click on the button "click -> console" there is multiple instances of the function refreshInfos().
My question is, how can I call that function (anywhere I'll need it) to makes the other instances stop/destroy?

As #priyadarshi swain answered you need to use clearTimeout()
1st: save setTimeout() to the global variable to allow you to clear the timer later
2nd: create another function to stop the timer and reset the i variable to 0 as well
3rd: you'll need to always call the stop timer function before run timer function
Here's how you can do this
var i = 0 , timer = 0; // set timer as a global variable
function refreshInfos() {
if($('.main_dialog').length > 0) {
console.log('loop-->',i++);
timer = setTimeout(function(){refreshManager()},1000); // save it to timer variable
}
}
// another function to stop the timer
function StoprefreshInfos(){
clearTimeout(timer); // clear the timer
i = 0; // reset i variable to 0
}
$('.main_dialog').on('click',function(){
StoprefreshInfos(); // run the stop timer function before refresh info function
refreshInfos(); // then run the refresh info function
});
// button click to just test and stop the timer
$('.stop').on('click',function(){
StoprefreshInfos(); // stop the timer function
});
function refreshManager(){
//do stuff
//then call refreshInfos() for automatisation purposes
refreshInfos();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='main_dialog' style="border:1px solid #333">
click -> console
</div>
<div class='main_dialog' style="border:1px solid #333">
click -> console
</div>
<button class="stop">Stop Timer</button>
Note: while refreshInfos(); run inside refreshManager() and you're using setTimeout(function(){refreshManager()},1000); this
code will refresh the refreshInfos(); so I didn't find a good way to
clear the timer inside the refreshInfos(); function .. and instead I
create another function to stop the timer

Use window.clearTimeout() to stop excution.
var timeout = setTimeout(function(){refreshManager()},1000);
window.clearTimeout(timeout);

Boolean statement not evaluating in javascript

I'm writing a script, and there are two boolean statements that are very similar but giving different results, and I don't see why they conflict with one another.
My function looks like this:
SCRIPT:
(function() {
window.onload = function() {
let stopped = true;
let button = document.getElementById("start-stop");
if (stopped) {
setInterval(function() {
console.log("The timer is working.");
}, 1000);
}
button.addEventListener('click', function(){
if (stopped) {
stopped = false;
console.log(stopped);
} else {
stopped = true;
console.log(stopped);
}
});
}
}
}).call(this);
The basic idea is that when I push the button the setInterval function stops, however it keeps on going even when the if/else function switches stopped to false.
For example, my console.log looks like this:
I.e. stopped = false, but setInterval doesn't terminate.
Why is this not evaluating correctly?

The problem with your code is that you are trying to work on a piece of code that has already started to operate. In simpler words, the setInterval method will be called every 1000ms, no matter what the value of stopped variable is. If you wish to really stop the log, you can do any of these:
clearInterval()
to completely remove the interval or
setInterval(function() {
if (stopped) {
console.log("The timer is working.");
}
}, 1000);
to check if the value of stopped variable has changed or not (after the click) and act accordingly. Choose either of these for your purpose..

you are calling setinterval even before button is clicked .As the event is already triggered you cannot stop just by setting the variable to false ,you need to clear the interval using clearinterval
check the following snippet
var intervalId;
window.onload = function() {
let stopped = true;
let button = document.getElementById("start-stop");
var Interval_id;
button.addEventListener('click', function() {
if (stopped) {
Interval_id = callTimeout();
stopped = false;
} else {
clearInterval(Interval_id);
stopped = true;
}
});
}
function callTimeout() {
intervalId = setInterval(function() {
console.log("The timer is working.");
}, 1000);
return intervalId;
}
<input type="button" id="start-stop" value="click it">
Hope it helps

Put the if(stopped) statement inside the setInterval function because if you used this function once it will keep going..
Another way to stop setInterval function is by using clearInterval, like this
var intervalId = setInterval(function() { /* code here */}, 1000)
// And whenever you want to stop it
clearInterval(intervalId);

When you click the button stopped variable becomes false but the setInterval will not stop because the setInterval code is already executed.. it will not execute again on button click. And if you reload the page what will happen is that stopped variable will be again set to true as you have written at first line and setInterval will execute again ..
Now What you can do is store setInterval in a variable like this
var timer = setInterval(function,1000);
and then when you click the button use this method to clear interval
clearInterval(timer);
this should do the trick .. Hope it helps ..

ClearInterval function doesn't work in my case

function active_timer(){
var time = 5000;
interval = setInterval(function(){
console.log('interval');
},time);
}
active_timer();
socket.on('timer', function (data) {
console.log('here') // it triggered
clearInterval(interval); // don't work
active_timer() //resume
});
I tried this and it won't work because the console.log still triggered every 5 sec. Any clue why?

Your code is technically running correctly but your console logs are misleading.
You've started an interval which triggers every 5 seconds. Each time your socket even fires, you clear the interval but then immediately start a new one. This gives the illusion that there's no gap in the intervals, but there is.
You can test this by changing your console.log('interval') to console.log(interval). So instead of just printing "interval", it will print out the value of the variable referencing the interval object. This is represented by a number which will change each time the interval is stopped and restarted.
Just to be clear, an interval cannot be resumed, only new ones started and existing ones stopped.
var interval = null;
function startTimer() {
// store the reference to our interval
interval = setInterval(function() {
console.log('triggered interval', interval);
}, 2000);
console.log('new interval started', interval);
}
startTimer();
// button click to simulate your socket event
$('#simulate').on('click', function() {
console.log('received simulated event');
clearInterval(interval);
startTimer();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="simulate">Simulate Socket Event</button>

checking for active timer (setTimeout)

I have a function that contain setTimeout() Method.
I have a button that calls that function, so you could hit this button multiple times and call this function as many times as you want.
Is there a way to actually execute this function, only if there is no other instance of this function that has an active timer?

You would have to keep track of whether you had previously set this timer or not and whether it was still active by using some sort of variable that had a scope that persisted across multiple button presses.
There is no built-in function that will tell you whether the timer you started with this button is still running. You have to create your own. It could work something like this:
var buttonTimer;
function myButtonClick() {
if (!buttonTimer) {
buttonTimer = setTimeout(function() {
buttonTimer = null;
// put your timer code here
}, 2000);
}
}
This will ignore the button click as long as there is a currently active timer. When there is no timer running, it will set a new timer.
Because you're keeping track of the actual timer ID, you have the freedom to implement other behaviors too such as cancelling the previous timer (such as a stop button) or reset the timer to a new time interval by cancelling the previous timer and then setting a new one.

Try this:
var Timer = function() {
var self = this;
this.running = false;
this.run = function() {
if(!self.running) {
self.running = true;
console.log('starting run');
setTimeout(function() {
self.running = false;
console.log('done running!');
}, 5000);
} else {
console.log('i was running already!');
}
}
return this;
}
var aTimer = new Timer();
And add a button for testing purposes:
<button onclick="aTimer.run()">Run!</button>
Fiddle: http://jsfiddle.net/kukiwon/FCuNh/

setTimeOut is not waiting for proper delay time

I have two buttons play and stop. When I click play I want the images to run like a slideshow.
I am using setTimeout() and having it wait 5 seconds before running.
When play is clicked, the code runs fine , waiting for 5 seconds and then displaying the next image, but when I click stop , and then click play again, it stops waiting the correct interval.Instead of waiting for 5 seconds before running, it waits for one second for the first two images and then 5 seconds for the next, again for one second for the next two and so on..
Why is it running correctly the first time and then breaking on retry?
Code:
var stop = false;
playClickfunction() {
showImages();
}
showImages() {
//code to display image for all no of images
//and user can stop on any no of image..
if(!stop)
setTimeout(showImages, 5000);
}
stopClickfunction() {
stop = true;
}

you need to clear the Timeout on stop.
maybe try something like that:
var timer = false;
playClickfunction()
{
showImages();
}
showImages()
{
//code to display image for all no of images
//and user can stop on any no of image..
if(!stop)
timer = setTimeout(showImages, 5000);
}
stopClickfunction()
{
clearTimeout( timer )
}

Try using the proper way than with a flag variable
var timer = setTimeout(showImages, 5000);
clearTimeout(timer);

you should use the method clearTimeOut() for that

If you click stop, then click start again before the 5 seconds has elapsed, the first timeout will keep running. What you need to do is clear the timeout, not just to stop the images, but every time start is clicked, e.g.:
var timeout;
function start() {
stop();
showImages();
}
}
function stop() {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
}
function showImages() {
// do stuff, then
timeout = setTimeout(showImages, 5000);
}
Alternatively, if start is clicked and the timeout is set, just ignore the click since the timer is already running. In that case you'd do:
function start() {
if (!timeout) {
showImages();
}
}