We Keep Coding

jQuery setTimeout wait

I have a simple JS function, to animate this form progress Bar:
https://codepen.io/himanshu/pen/syLAh
This is how my function looks like now:
function makeAnimate() {
var i = 1;
$('.progress .circle').removeClass().addClass('circle');
$('.progress .bar').removeClass().addClass('bar');
setInterval(function() {
$('.progress .circle:nth-of-type(' + i + ')').addClass('active');
$('.progress .circle:nth-of-type(' + (i-1) + ')').removeClass('active').addClass('done');
$('.progress .circle:nth-of-type(' + (i-1) + ') .label').html('✓');
$('.progress .bar:nth-of-type(' + (i-1) + ')').addClass('active');
$('.progress .bar:nth-of-type(' + (i-2) + ')').removeClass('active').addClass('done');
i++;
if (i==0) {
$('.progress .bar').removeClass().addClass('bar');
$('.progress div.circle').removeClass().addClass('circle');
i = 1;
}
//Here i would do if i equal 3 wait in the loop extra 100ms
if (i == 1) {
setTimeout(function(){
}, 100);
}
//Here i would do if i equal 3 wait in the loop extra 200ms
if (i == 3) {
setTimeout(function(){
}, 200);
}
}, 800);
}
It's not working. How can I do that to wait exrta millisecs?
Thank you!

What you need is extract the animation function and pass it to interval, save the interval as a scoped variable so you can clear it and assign new value with different timeout.
Here is a working proof of concept:
$(function() {
var i = 0;
var timeout = 1000; // 1 Second
$('.timeout').text(timeout);
$('.i').text(i);
var animate = function() {
if (i === 2) {
timeout = 6000; // 6 Seconds
clearInterval(interval);
interval = setInterval(animate, timeout);
}
if (i === 3) {
timeout = 1000; // Back to 1 second
clearInterval(interval);
interval = setInterval(animate, timeout);
}
if (i >= 7) {
// Remember to clear the interval once your steps complete, otherwise it will run forever
clearInterval(interval);
}
i++;
$('.timeout').text(timeout);
$('.i').text(i);
}
var interval = setInterval(animate, timeout);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Timeout: <span class="timeout"></span>
<br /> I: <span class="i"></span>

Having issues setting up a timeout session on my webpage

I am working on an application which requires to logout itself after certain amount of time, if user is not active on the page. I am using azure authentication token, and it expires in One hour. Now here I am trying to setup two timers, first timer will run every one min and will keep on resetting itself with every mouse action, and the 2nd timer should load after 58 mins of inactive, showing there are only 120 seconds remaining in the session. I am unable to get desired the functionality, the first timer runs after 1 min, but simultaneously it also kicks of the second timer.
Here's my Javascript code..
<script>
function timerModal() {
var count = 120;
console.log("This has started");
var counter = setInterval(timer, 1000); //1000 will run it every 1 second
function timer() {
count = count - 1;
if (count <= 0) {
$(this).mousemove(function (e) {
count = 120;
});
$(this).keypress(function (e) {
count = 120;
});
clearInterval(counter);
//vmsWebUtils.signOut(); //counter ended, do something here
return;
}
document.getElementById("timer").innerHTML = count + " "; // watch for spelling
console.log(count);
}
}
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 60000); // 1 minute
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
});
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime => 57) { // 57 minutes
$("#sessionTimeout").show();
timerModal();
}
console.log(idleTime);
}
</script>

I required the same effect for a site once, here is the code if it helps. (it's set to immediately show the prompt for testing purposes)
$('input').keypress(function(e) {
if (e.which == 13) {
$(this).next('input').focus();
e.preventDefault();
}
resetlogout();
});
$('textarea').keypress(function(e) {
resetlogout();
});
var autolog1 = setTimeout("logmeoutmsg()", 1);
var autolog = setTimeout("logmeout()", 10000);
function logmeout() {
window.location.href = "index.php?logout=1";
}
function logmeoutmsg() {
$("#logoutmsg").show();
var count=10;
var counter=setInterval(timer, 1000); //1000 will run it every 1 second
timer();
function timer()
{
$("#counterdown").html(count);
count=count-1;
if (count <= 0)
{
clearInterval(counter);
return;
}
}
}
function resetlogout() {
clearTimeout(autolog1);
clearTimeout(autolog);
autolog1 = setTimeout("logmeoutmsg()", 1);
autolog = setTimeout("logmeout()", 10000);
$("#logoutmsg").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logoutmsg" style="display:none;position:fixed;left:50%;top:100px;margin-left:-400px;border:1px solid #2e2e2e;width:800px;background:#eedbba;padding:10px 0px;">
<div style="width:760px;margin-left:20px;text-align:center;">
You will be logged out in <div style="display:inline-block;" id="counterdown"></div> seconds.<br><input style="color:#0000ff;cursor:pointer;" type="button" onclick="resetlogout();" value="Cancel">
<input style="color:#0000ff;cursor:pointer;" type="button" onclick="resetlogout();" value="Logout">
</div>
</div>

I fixed it my self with some modifications, here's the modified code !!
Works perfectly fine!!
<script>
var idleTime = 0;
var idleInterval = setInterval(timerIncrement, 60000); // 1 minute
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
function timerIncrement() {
idleTime = idleTime + 1;
console.log(idleTime);
if (idleTime > 2) { // 57 minutes
clearInterval(idleInterval);
timerModal();
console.log("hello");
}
console.log(idleTime);
}
function timerModal() {
var count = 120;
console.log("This has started");
var counter = setInterval(timer, 1000); //1000 will run it every 1 second
function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
vmsWebUtils.signOut(); //counter ended, do something here
return;
}
document.getElementById("timer").innerHTML = count + " "; // watch for spelling
console.log(count);
}
}
</script>

How to make my script pause after reaching a certain condition for 1000ms

I've got a setInterval script that repeats logging "Hello world" 10 times.
I would like to make it stop for 1 second after repeating 10 times, then starting again and doing the process for ever.
here is what I have:
var i = 0;
var x = setInterval(function(){
console.log("Hello world");
i++;
if(i >= 10){
i = 0;
stopInterval()
}
},1000);
var stopInterval = function(){
clearInterval(x);
setTimeout(function(){
//restart the interval, but how do I do???
},1000);
};
However, it says stopInterval is not defined and I thought it was

So you need to use clearInterval and use the id that is returned from setInterval to clear it.
function myTimer() {
var i = 0,
interval = setInterval(function(){
console.log("Hello world");
i++;
if(i >=10){
clearInterval(interval);
window.setTimeout(myTimer, 1000);
}
},100);
}
https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers

just with setTimeout and Recursion DEMO
var i = 1;
var delay = 500;
function callMe() {
console.log("Hello World"+i);
document.getElementById("pri").innerHTML = "Hello World " + i;
if (i == 11) {
i = 1;
delay = 1000;
console.log("......Restart");
document.getElementById("pri").innerHTML = "......Restart";
} else {
delay = 300;
}
setTimeout(callMe, delay);
++i;
}
window.onload = callMe;
<div id="pri"></div>

setInterval doesnt tigger inner script on first time run

Maybe I'm not properly understanding setInterval but I have made a kind of slideshow script, as below:
var i = 0;
setInterval(function() {
$('.slide').fadeOut('slow').delay(200);
$('.slide:eq(' + i + ')').fadeIn('slow').delay(2000);
i++;
if(i == 5){
i = 0;
}
}, 4000);
This works, except for the first run - no slides will display for the first 4 seconds.
See Fiddle here: http://jsfiddle.net/vpa89snf/6/
Is there anyway I can trigger whats inside the setInterval function when it runs the first time round?

Use setTimeOut instead of setInterval for better performance, inspect the sample below:
Here is working jsFiddle.
var i = -1;
var totalSlide = $('.slide').length-1;
var slideTimer = 0;
function nextFrame() {
i == totalSlide ? i = -1 : i;
i++;
$('.slide').fadeOut(200);
$('.slide').eq(i).fadeIn(200);
slideTimer = setTimeout(nextFrame,4000);
}
$('#holder').addClass('isAni');
nextFrame();
// play / pause animation
$('#holder').click(function() {
if ( $(this).hasClass('isAni') ) {
$(this).removeClass('isAni');
clearTimeout(slideTimer);
}else{
$(this).addClass('isAni');
nextFrame();
}
});

You need to run the function and not wait for the 4 first seconds:
var i = 0;
function doSomething() {
$('.slide').fadeOut('slow').delay(200);
$('.slide:eq(' + i + ')').fadeIn('slow').delay(2000);
i = (i + 1) % 5;
}
$document.ready(function () {
setInterval(doSomething, 4000);
doSomething(); // run it!
});
JSFIDDLE.

This is how setInterval is executed. It runs your function after x milliseconds set as 2nd parameter.
What you have to do in order to show the first slide is to have the 1rst slide fadein like below:
var i = 0;
$('.slide:eq(' + i + ')').fadeIn('slow').delay(2000);
i++;
setInterval(function() {
...
}, 4000);

Timer not running more than once

For some reason when I run the below script for the first time, the timer doesn't activate again for a second time, any idea why?
var timer = 0;
$(document).ready(function() {
$('#search').keypress(function() {
if(timer == 0) { $('#sel').html('<iframe src="search.php?p=' + $('#search').val() + '"></iframe>'); }
timer = 1;
setTimeout('timer = 0;', 2000);
});
});
Regards
Matthew

setTimeout only runs once. You probably want setInterval.

$('#search').keypress(function() {
if(timer == 0) { setTimeout('clearTimeout(this);timer = 0;', 2000); $('#sel').html('<iframe src="search.php?p=' + $('#search').val() + '"></iframe>'); }
timer = 1;
});
Running the timer inside it fixed it well :)