Develop Reference

integrating SetTimeOut function after button click

I have created a snippet of code that changes the state from display:block to display:none by using an onClick element. My goal is to delay the change in state, for a few seconds whilst an animation effect occurs.
This snippet of code below is what I am currently using to change the state of the element, but unsure on how to incorporate a delay.
Any advice or suggestions is greatly appreciated.
Thanks,
Ant
function showDiv1(elem) {
var divsToCheck = ["close","Holder"]; // Add to here to check more divs
for (var i = 0; i < divsToCheck.length; i++) {
if (divsToCheck[i] == elem) {
document.getElementById(divsToCheck[i]).style.display = "block";
} else {
document.getElementById(divsToCheck[i]).style.display = "none";
}
}
}

Put the code you want to be delayed inside an anonymous function, like so:
function showDiv1(elem) {
var divsToCheck = ["close","Holder"]; // Add to here to check more divs
for (var i = 0; i < divsToCheck.length; i++) {
if (divsToCheck[i] == elem) {
setTimeout(function() {
document.getElementById(divsToCheck[i]).style.display = "block";
}, 500);
} else {
setTimeout(function() {
document.getElementById(divsToCheck[i]).style.display = "none";
}, 500);
}
}
}
Here, 500 means delaying by 500 ms. You can change this to whatever amount of time (in milliseconds) that you need.

You should call a function in your loop that takes care of the setTimeout and hiding/showing instead of calling the timeout function in a loop. (Won't work because i is no longer available). See here: https://jsbin.com/refodobaca/1/edit?html,css,js,output
function showDiv1(elem) {
var divsToCheck = ["close","Holder"]; // Add to here to check more divs
for (var i = 0; i < divsToCheck.length; i++) {
if (divsToCheck[i] == elem) {
showHideDiv(divsToCheck[i], true);
} else {
showHideDiv(divsToCheck[i], false);
}
}
}
function showHideDiv(elem, bShow) {
var timeoutSeconds = 3;
setTimeout(function() {
document.getElementById(elem).style.display = (bShow ? "block" : "none");
}, timeoutSeconds * 1000);
}
showDiv1('Holder');

Your question is a little unclear because the name of your function is showDiv1 but you explain that you're trying to hide an element, so I've tried to answer in light of this and hopefully it will give you some ideas.
This code displays a couple of divs. If you click on them they turn red and, after a couple of seconds (to represent an animation), they are hidden.
dummyAnim returns a promise. After the animation has run its course (here represented by a two second delay) it is resolved. I've used await to pause code execution in an async function until the animation has resolved.
// Grab the elements and add click handlers to them
const divs = document.querySelectorAll('div');
divs.forEach(div => div.addEventListener('click', hideElement, false));
function dummyAnim() {
// return a promise which resolves (an animation)
// after two seconds
return new Promise((resolve, reject) => {
setTimeout(() => resolve(), 2000);
});
}
async function hideElement() {
this.classList.add('red');
await dummyAnim();
this.classList.add('hidden');
}
div { color: black; display: block }
.hidden { display: none }
.red { color: red }
<div>close</div>
<div>holder</div>

How to stop method execution defined in setTimeout

I am facing one problem in JS, please help me to resolve this.. I have two methods they are simultaneously executing one after other.. I have to stop them after second click on image.
Below is my JS code
I am calling fadeIn(img1, img2, img3) after first click on image then some animation will be goes on, once I click second time the whole animation(method execution) should be stopped.
var t1 = 0;
var t2 = 0;
function fadeIn(img1, img2, img3) {
$(imgIdForClick_1).addClass('animated pulse');
$('#cashBar1').addClass('animated pulse');
$('#cashBarDec1').addClass('animated pulse');
var t1 = setTimeout(function() {
fadeOut(img1, img2, img3);
if (clickCount_1 >= 2) {
alert("clicked 1");
return false;
}
}, 500);
//t1 = setTimeout(fadeOut, 500);
};
function fadeOut(img11, img22, img33) {
$(imgIdForClick_1).removeClass('animated pulse');
$('#cashBar1').removeClass('animated pulse');
$('#cashBarDec1').removeClass('animated pulse');
var t2 = setTimeout(function() {
fadeIn(img11, img22, img33);
if (clickCount_1 >= 2) {
alert("clicked 2");
return false;
}
}, 500);
//t2 = setTimeout(fadeIn, 500);
};
By below code I am calling this snippet in first click
imgId1 = $('#img1');
imgId2 = $('#cashBar1');
imgId3 = $('#cashBarDec1');
fadeIn(imgId1, imgId2, imgId3);
After second click
clickCount_1 varibale will be 2
clearTimeout(t1);
clearTimeout(t2);

See the DEMO. Click on the image to stop animation.
I have added a flag that would be checked upon the call of the function, and if the value is true then and then only the functions would be called. The flag would be set to false when clicked on image, so the function would be called no longer.
code:
var animate = true;
function fadeIn() {
$('#pulseDiv').find('div#advisersDiv').delay(400).addClass("pulse");
if(animate == true)
{
setTimeout(fadeOut,1000);
}
};
function fadeOut() {
$('#pulseDiv').find('div#advisersDiv').delay(400).removeClass("pulse");
if(animate == true)
{
setTimeout(fadeIn,1000);
}
};
fadeIn();
$('#image').click(function(){
animate = false;
alert('now the animation will stop');
});

Can't See Why setInterval() is Being Cleared

I can't for the life of me see why my setInterval() function is only executing one time. I believe I am doing it right according to its usage. It's a slideshow script that takes a group of slides as part of a slideshow object called TheBand and changes slides using setInterval().
This is the timer:
current_band.obj_timer = window.setInterval(function () {
TheBand.nextSlide(current_band_id);
}, current_band.timer);
This is the nextSlide function:
nextSlide : function (band_id) {
var obj_band = TheBand.bands[band_id];
if (band_id == 0) {
console.log(obj_band.current_slide, obj_band.slide_count)
}
if (obj_band.current_slide + 1 >= obj_band.slide_count) {
new_slide = 0;
} else {
new_slide = obj_band.current_slide + 1;
}
TheBand.changeSlide(band_id, new_slide);
},
Then the changeSlide function:
changeSlide : function (band_id, slide_id) {
var obj_band = TheBand.bands[band_id];
if (slide_id != obj_band.current_slide) {
// Get the viewport width for display purposes
var slide_width = jQuery(obj_band.viewport).width();
// Set up the slide objects
var current_slide = jQuery(obj_band.slides[obj_band.current_slide]);
var new_slide = jQuery(obj_band.slides[slide_id]);
// Set the left value for the new slide and show it
new_slide.css('left', slide_width).width(slide_width).height(obj_band.max_height);
new_slide.show();
// Animate the slide transition
current_slide.animate({ left: -slide_width }, obj_band.transition_time);
new_slide.animate({ left: 0 }, obj_band.transition_time, 'swing');
if (new_slide.css('background-color') != current_slide.css('background-color')) {
jQuery(obj_band.back).animate({ backgroundColor : new_slide.css('background-color') }, obj_band.transition_time);
}
// Set the class for the nav buttons
jQuery(obj_band.nav_buttons[obj_band.current_slide]).removeClass('selected');
jQuery(obj_band.nav_buttons[slide_id]).addClass('selected');
// Run the slide javascript - be careful with this!
eval(obj_band.slide_script[obj_band.current_slide].unload);
eval(obj_band.slide_script[slide_id].load);
window.setTimeout(function () {
eval(obj_band.slide_script[slide_id].ready);
}, obj_band.transition_time);
// Set the current slide variable
obj_band.current_slide = slide_id;
// Set the correct Nav color
TheBand.setNavColor(band_id);
}
},
Seems simple enough, but I only get to the second slide!? No errors or warnings in console and if I watch the clear timer breakpoint it does show a clear timer event, but its not from this code... Please help?
P.S. The setInterval() timer does not break if I comment out the changeSlide function.

restart loop after it's paused by flag

I'm putting together some code to essentially replace the contents of a div when I mouseover a specific link. I then added the changer function to cycle through the content replacement automatically. I set flags for mouseover and mouseout and I can actually get the changer function to stop on mouseover but I can't quite figure out how to make it start up again on mouseout. Any advice is appreciated.
var pause=false;
$('.banner-nav a').mouseover(function () {
pause=true;
setFeature(this);
return false;
});
$('.banner-nav a').mouseout(function () {
pause=false;
});
changer(0, 5000);
function setFeature(f) {
var m = $(f).attr('rel');
$('.banner-nav a').not(f).removeClass('active');
$(f).addClass('active');
$('#featureContainer').html($(m).html());
}
function changer(index, interval) {
var buttons = $('.trigger'),
buttons_length = buttons.length;
var button = buttons.eq(index % buttons_length);
setFeature($(button));
setTimeout(function() {
if (!pause) {
changer(++index, interval);
}
}, interval)
}

The issue is that changer is responsible for its own delayed execution, but pausing it stops the scheduled execution. Another problem is that the next scheduled execution (if any) still happens after pausing.
Use setInterval instead of setTimeout. Instead of using a flag, clear the interval to pause and start it again to unpause.
(function() {
var index=0;
function changer() {
var buttons = $('.trigger'),
buttons_length = buttons.length;
var button = buttons.eq(index % buttons_length);
setFeature($(button));
++index;
}
var changerInterval,
period = 5000;
function startChanger() {
if (! changerInterval) {
changerInterval = setInterval(changer, interval);
}
}
function stopChanger() {
clearInterval(changerInterval);
changerInterval = 0;
}
$('.banner-nav a').mouseover(function () {
stopChanger();
setFeature(this);
return false;
});
$('.banner-nav a').mouseout(function () {
startChanger();
});
/* could implement other functions to e.g. change the period */
function setChangerPeriod() {
...
}
window.setChangerPeriod = setChangerPeriod;
...
})

infinte loop while trying to display buffer symbol as pics preload

I am really getting frustrated with this. So I am making a slideshow with javascript but while all the images are being loaded I would like to show a buffering symbol..
here is the buffering symbol code.. if you have a better way of doing it please speak up.
function loadAnimation(){
setTimeout(
"document.getElementById('main_photo_img').src = 'images/loadBar1.jpg'", 300);
setTimeout(
"document.getElementById('main_photo_img').src = 'images/loadBar2.jpg'", 600);
setTimeout(
"document.getElementById('main_photo_img').src = 'images/loadBar3.jpg';", 900);
}
that displays 3 images that make up a buffer animation.
my code for playing it until an image is loaded is this..
while(!pic1.onload){
loadAnimation();
}
All that happens though is an infinite loop.

Try something like this:
function loadAnimation() {
var i = 0,
timer;
(function k() {
var cur = i++ % 3 + 1;
document.getElementById('main_photo_img').src = 'images/loadBar' + cur + '.jpg';
timer = setTimeout(k, 300);
})()
return {
cancel: function () {
clearTimeout(timer);
}
};
}
....
var animation = loadAnimation();
pic1.onload = animation.cancel; //The cancel will be called when pic1 loads. You may add other code in the cancel function if needed
I'd probably just use a gif or css background sprites, setting src dynamically is probably the hackiest way to do this I've seen to date ;p

Here's a recursive setTimeout version which I think is what you're looking for.
var i = 0, intervalId;
function animate(){
var newImg = 'images/loadBar' + ((i++ % 3) + 1) + '.jpg'
document.getElementById('main_photo_img').src = newImg;
intervalId = setTimeout(animate, 300);
}
And again, you'd stop this with
clearInterval(intervalId);
To start it with the first image showing up immediately you'd simply call
animate();
But to have the first image wait 300ms before showing, you would do
intervalId = setTimeout(animate, 300);