setTimeout() is not calling function after specified time - javascript

I have a code in my js file.
function makeScrollable(wrapper, scrollable){
...
// Hide images until they are not loaded
scrollable.hide();
var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);
// Set function that will check if all images are loaded
var interval = setInterval(function(){
var images = scrollable.find('img');
var completed = 0;
if (completed == images.length) {
clearInterval(interval);
// Timeout added to fix problem with Chrome
setTimeout(function(){
loading.hide();
....
}, 1000); //end of setTimeout(func, delay)
} //end of if (completed == images.length)
}, 100); //end of var interval = setInterval(fn, 100)
...
}
(function(){
makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
})(jQuery);
But my timeout function isn't calling. I am still getting the loading Div. Function should be call after 1 sec, which hide the loading div and execute code after. But it isn't happening. What i am doing wrong?
Thanks

Wrong position of code.
var completed = 0;
if (completed == images.length) { // This will be true only when there are no images
clearInterval(interval);
setTimeout(function(){
loading.hide();
....
}, 1000);
}
put it outside
var completed = 0;
var interval = setInterval(function(){
var images = scrollable.find('img');
if (completed == images.length) {
clearInterval(interval);
// Timeout added to fix problem with Chrome
setTimeout(function(){
loading.hide();
....
}, 1000); //end of setTimeout(func, delay)
} //end of if (completed == images.length)
}, 100); //end of var interval = setInterval(fn, 100)
And hope you are incrementing completed somewhere in the code

Related

hold down button after 1 second and loop the action using jQuery

I got this code from: Jquery: mousedown effect (while left click is held down)
It is behaving that if I am holding the button in every 50ms it will do something.
var timeout = 0;
$('#button_add').mousedown(function () {
timeout = setInterval(function () {
value_of_something ++;
}, 50);
return false;
});
});
But what I want is to execute this part after holding down the button by 1 second and it will continuously do the action 50ms.
As I said you need to use setTimeout()
var timeout = 0;
$('#button_add').mousedown(function () {
setTimeout(function(){
timeout = setInterval(function () {
value_of_something ++;
}, 50);
} , 1000);
return false;
});
Jsfiddle
Please use this code... You have to clearTimeout when user mouseup :
var timeout = 0;
$('#button_add').mousedown(function() {
oneSecondTimer = setTimeout(function() {
timeout = setInterval(function() {
value_of_something++;
}, 50);
}, 1000);
return false;
});
$("#button_add").mouseup(function() {
clearTimeout(oneSecondTimer);
});

Jquery. Change setInterval time while running

I'm new to Jquery and I want to change the 2000 while the code is running
var interval = setInterval(function() {
//do something
}, 2000);
Something like this:
var wait = 200;
var interval = setInterval(function() {
if(wait == 200)
{
wait = 100;
}
}, wait);
Is there a way of doing this?
You can stop the loop
clearInterval(interval);
And start over with the new time:
interval = setInterval(fn, newTime);

How do I get my image slider to reset its auto-scroll timer after a click?

I have an image slider with n amount of images. It scrolls automatically between each one every 5 seconds. There is a "previous" and "next" button on either side of the slider.
$('#button-next').click(function () {
//goes to next slide
});
$('#button-prev').click(function () {
//goes to previous slide
});
var _scrollInterval = AutoScroll();
function AutoScroll() {
var temp = setInterval(function () {
$('#button-next').click();
}, 5000)
return temp;
}
My desired functionality is that when the user clicks "next" or "previous", the AutoScroll() timer effectively "resets" back to 0 and then starts up again.
How can I accomplish this? I feel like I need to use clearInterval() or something along those lines but I am not too familiar with these functions.
Fiddle: https://jsfiddle.net/5u67eghv/4/
This should work:
var temp; // <- add variable declaration
$('#button-next').click(function () {
nextImage = currentImage == lastImage ? firstImage : currentImage + 1;
sliderImages.eq(currentImage).hide(500);
sliderImages.eq(nextImage).show(500);
currentImage = nextImage;
clearInterval(temp); // <- clear interval
AutoScroll(); // <- restart autoscroll
});
$('#button-prev').click(function () {
prevImage = currentImage == firstImage ? lastImage : currentImage - 1;
sliderImages.eq(currentImage).hide(500);
sliderImages.eq(prevImage).show(500);
currentImage = prevImage;
clearInterval(temp); // <- clear interval
AutoScroll(); // <- restart autoscroll
});
function AutoScroll() {
temp = setInterval(function () { // <- temp variable already declared
$('#button-next').click();
}, 5000)
return temp;
}
YOu need to clear your interval on each click of the button
$('#button-next').click(function () {
//goes to next slide
clearInterval(_scrollInterval);
//Do other functions
_scrollInterval = AutoScroll(); //Reset Interval Timer
});
$('#button-prev').click(function () {
//goes to previous slide
clearInterval(_scrollInterval);
//Do other functions
_scrollInterval = AutoScroll(); //Reset Interval Timer
});
var _scrollInterval = AutoScroll();
function AutoScroll() {
var temp = setInterval(function () {
$('#button-next').click();
}, 5000)
return temp;
}
Here you clear and reset interval every time button is pushed
You are trying to clear the function not a variable try as follows:
var myVar = setInterval(autoplay(), 5000);
then
clearInterval(myVar)
then set the interval again.

Stop setInterval until action not performed?

Is it possible that we could stop setInterval means next interval will call only when first event completed.
I want to load next image only when previous image loaded.This event should work only after mouse over.But if next image is large in size then next interval is calling in my case..i want to stop interval until last image not loaded.
This is my code:
jQuery('.product').on('mouseover', function(){
timer = setInterval(function() {
if (counter === product_images.length) {
counter = 0;
}
// selector.addClass('hidden');
loading_image.removeClass('hidden');
selector.attr('src', 'localhost/product/' + product_images[counter]);
var loadImage = new Image();
loadImage.src = selector.attr('src');
loadImage.onload = function() {console.log('after load');
loading_image.addClass('hidden');
// selector.removeClass('hidden');
selector.show();
};
counter = counter + 1;
}, 1000);
How we can stop setInterval or prevent it to go next interval even task of last interval is not completed.Not for clearInterval,It should be continue(setInterval) if first task completed.
Please help me.
try the below code. this may work,
var flag = 1;
jQuery('.product').on('mouseover', function(){
if(typeof timer != "undefined")
clearInterval(timer);
timer = setInterval(function() {
if(flag){
if (counter === product_images.length) {
counter = 0;
}
loading_image.removeClass('hidden');
selector.attr('src', 'localhost/product/' + product_images[counter]);
flag = 0;
var loadImage = new Image();
loadImage.src = selector.attr('src');
loadImage.onload = function() {
console.log('after load');
loading_image.addClass('hidden');
selector.show();
flag = 1;
};
counter = counter + 1;
}
}, 1000);
NOTE: I have not tested this code.

Resetting setinterval in JS

Code looks like that:
function startTimer(counter) {
var interval = setInterval(function () {
counter--;
$('#timer').html(counter);
// Display 'counter' wherever you want to display it.
if (counter == 0) {
clearInterval(interval);
$('#question').html("Time ended");
setTimeout(function () {
window.location.href = "/";
}, 5000);
return false;
}
}, 1000);
}
What I want to do is, when I call this function multiple times, every time to reset timer to 30 seconds and kill all past instances. Currently it messes up with past intances when I call multiple times. What am I doing wrong?
You have to define the var interval outside the function:
var interval;
function startTimer(counter) {
interval = setInterval(function () {
counter--;
$('#timer').html(counter);
// Display 'counter' wherever you want to display it.
if (counter == 0) {
clearInterval(interval);
$('#question').html("Time ended");
setTimeout(function () {
window.location.href = "/";
}, 5000);
return false;
}
}, 1000);
}

Categories