Develop Reference

2 setTimeouts not clearing correctly - How to reset the proper way?

Will try to explain what I'm trying to do here. I have 2 logos and i want toggle 1 class after every setTimeout function "show" For some reason resetting the timeOut is not working properly.
The first function is fired after 5 seconds and the second function is fired after 8 seconds. I want to reset these because I don't want the function to be fired before the correct "X" amount of seconds is done.
let logo1 = document.querySelector('.logo-1');
let logo2 = document.querySelector('.logo-2');
function firstLogo() {
console.log('First logo');
logo1.classList.add('show');
logo2.classList.remove('show');
setTimeout(firstLogo, 5000);
}
function secondLogo() {
console.log('Second logo');
logo1.classList.remove('show');
logo2.classList.add('show');
setTimeout(secondLogo, 8000);
}
setTimeout(firstLogo, 8000);
setTimeout(secondLogo, 5000);
Can someone help?

You can use something like this:
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
The clearTimeout will prevent the function set with the setTimeout() to execute.
Hope this helps.

You will get some strange interactions between the timeouts, e.g.
At the start, timers will be set for 5 and 8 seconds
At 5 seconds:
logo1 will be shown
logo 2 will be hidden
the function will run in another 5 seconds
At 8 seconds:
logo 2 will be shown
logo 1 will be hidden
the function is set to run again in 8 seconds
At 10 seconds, the first function runs again so logo 1 is shown
At 15 seconds, the first function runs again, logo 1 is alreay shown
At 16 seconds, the second function runs again, logo 2 is shown
At 20 seconds, the first function runs again, logo 1 is shown
At 24 second, the second function runs again, logo 2 is shown
At 25 seconds, the first function runs again, logo 1 is shown
At 30 seconds, the first function runs again, logo 1 is alreay shown
At 32 second, the second function runs again, logo 2 is shown
and so on…
Perhaps you want logo 2 shown for 5 seconds, then logo 1 for 3 seconds, then logo 2 for 5 seconds, etc.
In that case, you can call one function from the other, using appropriate settings for setTimeout. Since the default is to display the logos, I've changed show to hide, e.g.
let logo1 = document.querySelector('.logo-1');
let logo2 = document.querySelector('.logo-2');
function firstLogo() {
console.log('Hiding first logo');
logo1.classList.toggle('hide');
logo2.classList.toggle('hide');
setTimeout(secondLogo, 3000);
}
function secondLogo() {
console.log('Hiding second logo');
logo1.classList.toggle('hide');
logo2.classList.toggle('hide');
setTimeout(firstLogo, 5000);
}
firstLogo();
.hide {
display: none;
}
<span class="logo-1">logo 1</span><span class="logo-2 hide">logo 2</span>

on click, reduce countdown with 1 and so something, when countdown reaches 0 open window

If the downvoters could leave a reason. That'd be great.
Lets say I have a value of 10 on my web page, and a button.
Every time a user clicks on this button, I want to have a visual indication of the value decreasing by 1.
When value is 0 (after 10 clicks) it will hide a div, and show another one.
However when clicking the button, not only the counter needs to reduce by 1 but it also needs to open a window. (It's the same window every click)
On every click I'd also like to change style="width:x%"`` with 10-20-30% and so forth. (But with a delay of 5 seconds)
Does anyone have an idea on how to do all of this, without going overboard on the amount of code.
Here the steps:
Click button
Window opens
Counter goes from 10 to 9
After 5 seconds have passed the progress bar's style switches to
width: 10%;
...
Counter reaches 0:
Hide div X (fadeout)
Show div X
source code:
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)<=0) {
//hide div
//show div
}
i.innerHTML = parseInt(i.innerHTML)-1;
window.open("");
//change loader
}

This code is maybe the solution you wanted:
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)<=0) {
$("#counter").fadeout();
i.innerHTML =10;
i.style.width="100%";
$("#counter").fadein(10);
} else {
i.innerHTML = parseInt(i.innerHTML)-1;
setTimeout(function(){
var i = document.getElementById('counter');
i.style.width="10%";
i.innerHTML="1";
},5000)
}
var msg = window.open("", "Window name", "width=200, height=100");
msg.document.write("Some HTML");
}
You have to add jquery in the html head!
Leave a comment if the code doesn't help.

Jasvascript : Alert notification after inactivity and logging out after 5 more minutes

I have a little problem regarding browser window closing,
Basically, I have a page which I want to close after 15 minutes of inactivity. I alraeady managed to make a timer that will alert the window after inactivity for 10 minutes.
What I need is that on timer finish, a popup/alert with a visible countdown comes up and from here the user can either continue with his session or end it. If the user does not click on continue or ignore the popup for 5 more minutes, both the popup and parent window will close. Else if the user presses continue the popup will close and the main page is refreshed (and thus starting the timer again) Any suggestions? Here is my code:
var idleTime = 0;
var activeTime = 0;
var warningFlag = 0;
var loginTime = new Date();
var logoutTime = loginTime;
setInterval(function checkIdle() {
idleTime += 1;
activeTime += 1;
if(idleTime > 10) {
alert("You've been inactive for 10 \n minutes, are you still there ?\nYou logged in at " + loginTime);
warningFlag=1;
}
if((idleTime > 15) && (warningFlag==1)) {
alert("You've been logged out due to inactivity for 15 \n minutes? \nYou logged out at " + logoutTime);
window.close();
}
window.onload = resetTimer;
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
},1000);
function resetTimer() {
idleTime = 0;
}

Instead of alert window use a div for that visibility hidden/visible is toggled. That div should contain another container, div or span, for displaying the countdown time.

You can use modal windows, they behave like alerts by displaying a div and blacking out the rest of the page.
You can see some good examples here:
http://www.scriptiny.com/2011/03/javascript-modal-windows/
Hope this helps.

Getting one slide in my slideshow to stay longer between intervals

What I'm trying to accomplish is a slideshow that has one slide that lasts 10 seconds-- while all other slides in the slideshow last 4 seconds. In my code below, the current.id==1 condition is my first slide. When the DOM loads, it checks what slide is first, and if it's current.id==1, it makes all transitions 10 seconds. Which isn't exactly what I want. Any suggestions how I could get the all other slides to interval every 4 seconds and still keep my main slide lasting 10 seconds every time it flips back to that slide?
Sorry if that is a bit confusing. Thanks for the help guys!
/* Setting auto-advance every 10 seconds for main slide, 4 seconds for all others */
var auto;
if (current.id==1) { //this is the only slide I want lasting 10 seconds.
auto=setInterval(function(){
next();
},10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
auto=setInterval(function(){
next();
},4*1000);//4 seconds each other slide.
}

I write my JS like this. It makes it far more readable in my opinion and really helps Though normally I don't include comments like this
Your next() function should call itself
$(document).ready(function () {
var Page = {};
Page.slider = (function () {
return {
init: function () {
setTimeout(function () {
Page.slider.nextSlide();
}, 10*1000);
},
nextSlide: function () {
var duration = 4;
if (Page.slider.isShowingFirst()) {
duration = 10;
}
//code to handle transitioning slides
setTimeout(function () {
Page.slider.nextSlide();
}, duration*1000);
},
isShowingFirst: function () {
//return boolean on whether it's showing the first slide or not
}
}
})();
Page.slider.init();
});

You can't use setInterval() if you want a varying interval because you only call it once and then it runs repeatedly with the same interval until you stop it. You could use setTimeout() on each slide like this:
if (current.id == 1) { //this is the only slide I want lasting 10 seconds.
setTimeout(next, 10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
setTimeout(next, 4*1000);//4 seconds each other slide.
}
P.S. You may also want to notice that you don't need an anonymous function for setTimeout() or setInterval() if all you want it to do is call a function you already have defined as in this example.

You should use setTimeout instead of setInterval.
var auto;
if (current.id==1) { //this is the only slide I want lasting 10 seconds.
auto=setTimeout(function(){
next();
},10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
auto=setTimeout(function(){
next();
},4*1000);//4 seconds each other slide.
}

Popup box with a timer

After some specified inactivity time (IDLE Time say for 10 mins) the application should give a pop up box with a timer (should display like 60 59 58 ....1), that box should close within 60 secs with cancel option selected and that browser should close if user doesn't select any option. If the user selects the cancel option within 60 secs also it should be closed.
To show a popup box I am using setTimeout("pop()",600000); but how to include a timer in that at least that box should close within 60 sec if user doesn't select any option. Is there a solution for this?

You may try putting below code in your popup window.
<script>
function mytimer()
{
setTimeout(function closewin(){window.close;}, 600000);
}
</script>
<body onload="mytimer();">

You can use setTimeout() or setInterval() again. In your pop() function, start another function with a timeout of 1 second (1000ms) and on each call decrease a counter and update the label. When the counter reaches 0, check that the box is still on the screen and if so call window.close() (not all browsers will actually respond to a closing attempt though).
Example:
function pop() {
var counter = 60;
var box = document.createElement('div');
var label = document.createElement('span');
label.innerText = counter;
box.appendChild(label);
// Position box and label as you wish.
function tick() {
counter--;
if (counter == 0) {
window.close();
} else {
label.innerText = counter;
setTimeout(tick, 1000);
}
}
setTimeout(tick, 1000);
}