We Keep Coding

Why my interval is still counting and didn't stop at 0?

I wonder why my countdown didn't stop at 0, the "Time's Up" log are still logging infinitely.
Here's my code:
let timer = 6;
setInterval(function () {
if (timer > 0) {
timer--;
console.log(timer);
} else {
console.log("Time's Up");
clearInterval(timer);
}
}, 1000);

clearInterval needs to know the action you want to cancel. In this case, the action is actually your setInterval, so just assign it to a variable and use that variable as a parameter for clearInterval.
const myInterval = setInterval(() => {
if (timer > 0) {
timer--;
console.log(timer);
} else {
console.log("Time's Up");
clearInterval(myInterval);
}
}, 1000);

What I understand that you are using timer as a variable. So, you are doing one mistake, you are giving wrong parameter inside clearInterval method. You can stop clearInterval method by the code written below:-
NOTE:- I just substitute console.log with document.write to show the Output on screen.
var timer = 5;
var myinterval = setInterval(function () {
if (timer > 0) {
timer--;
document.write(timer+"<br>");
} else {
document.write("Time's Up");
clearInterval(myinterval);
}
}, 1000);

Adding timeout to a loop

I have a function that will perform an action when the timer reaches 5000ms:
var timer = new Timer(function () {
console.log("refreshingBid");
refreshBid();
}, 5000);
timer.pause();
if (isElementInViewport() === true) {
console.log("element in view");
timer.resume();
} else {
timer.pause();
console.log("element is out of view")
}
//I am trying to loop this 5 times with the 5000ms delay - the code I am using for this is:
for (i=0;i<=5;i++)
{
MyFunc();
}
It seems regardless of whether I put the for loop in the timer or whether I put the timer inside the for loop the result is the same where all 5 loops happen instantaneously instead of with a delay of the timer being applied? I'm not sure what i'm doing wrong here... Any help would be appreciated!
Sorry, edit to include the complete code below:
<script>
var iframe2 = document.getElementById('postbid_if');
function isElementInViewport() {
var el = document.getElementById('postbid_if')
console.log(el)
var rect = el.getBoundingClientRect();
console.log(rect)
return rect.bottom >= 0 &&
rect.right >= 0 &&
rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
rect.top < (window.innerHeight || document.documentElement.clientHeight);
}
function Timer(callback, delay) {
var timerId, start, remaining = delay;
this.pause = function () {
window.clearTimeout(timerId);
remaining -= new Date() - start;
};
this.resume = function () {
start = new Date();
window.clearTimeout(timerId);
timerId = window.setTimeout(callback, remaining);
};
this.resume();
}
for (i = 0; i <= 5; i++) {
MyFunc();
}
var timer = new Timer(function () {
console.log("refreshingBid");
refreshBid();
}, 5000);
timer.pause();
if (isElementInViewport() === true) {
console.log("element in view");
timer.resume();
} else {
timer.pause();
console.log("element is out of view")
}
</script>

It's because it's looping through quickly 5 times then all 5 loops are delaying after the 5 seconds. The timeout pauses it after 5 seconds, not for 5 seconds up front.

Perhaps you could revise your code in this way to achieve the timer based iterations as required:
//Track the current iteration
var i = 0;
function MyFunc() {
var timer = new Timer(function () {
console.log("refreshingBid");
refreshBid();
// The current timer has completed. If the current
// iteration is less than 5...
if(i < 5) {
i++;
// .. then start another timer for the next iteration
MyFunc();
}
}, 5000);
timer.pause();
if (isElementInViewport() === true) {
console.log("element in view");
timer.resume();
} else {
timer.pause();
console.log("element is out of view")
}
}
// Start the first iteration
MyFunc();

setInterval on resize

I have the below code:
var intervalId = "";
var isRunning = false;
var iCount = 0;
function animation() {
switch (iCount++ % 2) {
case 0:
$('.class1').removeClass("is-active");
$(".class2").addClass("is-active");
break;
case 1:
$('.class2').removeClass("is-active");
$(".class1").addClass("is-active");
break;
}
isRunning = true;
}
if (window.innerWidth > 1024) {
intervalId = setInterval(animation, 3000);
}
$(window).on("orientationchange resize", function () {
debounce(function () {
if (window.innerWidth < 1024) {
if (isRunning == true) {
clearInterval(intervalId);
isRunning = false;
}
} else if (window.innerWidth > 1024) {
if (isRunning == false) {
intervalId = setInterval(animation, 3000);
}
}
}, 250);
});
What I'm trying to get, is on a 1024+ screen the setInterval is fired, anything below 1024 isn't fired. But on resize to lower than 1024 the setInterval still being fired.
Any help would be greatly appreciated.

The isRunning logic is useless and redundant with intervalId being defined or not. You're using two variables for the same thing, and that's overkill.
Besides, you test window.innerWidth twice : is it <1024 or is it >1024 ? The second test is useless, and what happens if it's exactly 1024?
This block code makes things clearer and simpler :
debounce(function () {
if (window.innerWidth < 1024) {
clearInterval(intervalId);
} else {
if(!intervalId) intervalId = setInterval(animation, 3000);
}
})

I got it working by using this code for my resize function.
$(window).on("orientationchange resize", debounce(function () {
if (window.innerWidth < 1024) {
clearInterval(intervalId);
intervalId = "";
} else {
if (!intervalId) intervalId = setInterval(animation, 3000);
}
}));

adding wait for a loop in javaScript

I wanna run a loop in javaScript like this
for (conditions) { do something; wait for a second
}
How to make the portion of the condition typed in bold (delaying the condition for a second) ?

timeTillWarning = 10;
setTimeout(looping, 1000);
function looping() {
if (count > 0) {
count--;
setTimeout(looping, 1000);
}
}

var i = 100;
var interval = setInterval(function () {
// do something
i--;
if (i == 0) clearInterval(interval);
}, 1000);

turning a if(button.g == 1) to auto run in 10 seconds

I'm trying to add to this code so it will auto-run the string for button.g == 1, after 10 seconds of not clicking the button.
{
if(button.g == 0)
{
f.a(parent);
AutoJoin.instance.resetCache();
}
if(button.g == 1)
{
AutoJoin.instance.screen = new AutoJoinScreen(parent, info);
f.a(AutoJoin.instance.screen);
}
if(button.g == 2)
f.a(new PropertiesScreen(this, info.ip));
}

You can use setTimeout to "delay" an action:
setTimeout(function() { console.log('I'm 10 secs later'); }, 1000*10);
With clearTimeout you can abort such a timer:
var timer = setTimeout(/* .... */);
clearTimeout(timer)
In your example you could start a timeout which executes the logic for button.g == 1 and cancel the timer if any button is clicked:
Setting the timer to 10s:
var timer = setTimeout(1000*10, function() {
AutoJoin.instance.screen = new AutoJoinScreen(parent, info);
f.a(AutoJoin.instance.screen);
})
Click routine:
clearTimeout(timer);
if(button.g == 0) {
f.a(parent);
AutoJoin.instance.resetCache();
}
else if if(button.g == 1) {
AutoJoin.instance.screen = new AutoJoinScreen(parent, info);
f.a(AutoJoin.instance.screen);
}
else if(button.g == 2) {
f.a(new PropertiesScreen(this, info.ip));
}