i'm coding a slider ...
it have btns and it changes slides automatically.
but whene we click on buttons setInterval code is doing its work !
problem in an example :
it shoud change the slide in next 5s . ok ?
but whene we click on arrows after 2 sec
setintrelval shoud change slide automatically at next 5s.
but it change at next 3s.
// other functions ...
$(document).ready(function(){
var timeout_id = 0;
var timeout_id = setInterval( function(){next()}, 5000)
})
var originalAddClassMethod = jQuery.fn.addClass;
$.fn.addClass = function(){
var result = originalAddClassMethod.apply( this, arguments );
jQuery(this).trigger('cssClassChanged');
return result;
}
$('.customers_comment li').bind('cssClassChanged', function(){
var id = $('.customers_comment li.act').attr('data-id');
$('.customers_comment .dots a[href="#'+id+'"]').addClass(act).siblings('a').removeClass(act)
clearTimeout(timeout_id);
})
i upload the theme in here
http://demo.eagle-design.ir/amin/#sec4
You have declared timeout_id as a local variable inside the dom ready handler so it is not accessible outside that dom ready handler, so declare it outside of the dom ready handler if you want to use it in a different scope
var timeout_id;
$(document).ready(function () {
timeout_id = setInterval(function () {
next()
}, 5000)
})
I would recommend moving the event registration code also to the dom ready handlre
$(document).ready(function () {
var timeout_id = setInterval(function () {
next()
}, 5000);
$('.customers_comment li').bind('cssClassChanged', function () {
var id = $('.customers_comment li.act').attr('data-id');
$('.customers_comment .dots a[href="#' + id + '"]').addClass(act).siblings('a').removeClass(act)
clearTimeout(timeout_id);
});
});
var originalAddClassMethod = jQuery.fn.addClass;
$.fn.addClass = function () {
var result = originalAddClassMethod.apply(this, arguments);
jQuery(this).trigger('cssClassChanged');
return result;
}
timeout_id is not defined where you call clearTimeout. Try with :
$(document).ready(function(){
var timeout_id = 0;
var timeout_id = setInterval( function(){next()}, 5000)
var originalAddClassMethod = jQuery.fn.addClass;
$.fn.addClass = function(){
var result = originalAddClassMethod.apply( this, arguments );
jQuery(this).trigger('cssClassChanged');
return result;
}
$('.customers_comment li').bind('cssClassChanged', function(){
var id = $('.customers_comment li.act').attr('data-id');
$('.customers_comment .dots a[href="#'+id+'"]').addClass(act).siblings('a').removeClass(act)
clearTimeout(timeout_id);
})
})
Related
var myImage = document.getElementById("mainImage");
var imageArray = ["_images/1.jpg","_images/2.jpg","_images/3.jpg",
"_images/4.jpg","_images/5.jpg","_images/6.jpg"];
var imageIndex = 0;
function changeImage() {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
I'm learning fundamental in JS how to get a changing images like a gif, when you onmouseover it, it will stop, then onmouseout, it resume again. I'm struggling on the below part.
var intervalHandler = setInterval(changeImage, 3000);
myImage.onmouseover = function(){
clearInterval(intervalHandler);
}
myImage.onmouseout = function(){
setInterval(changeImage, 3000);
}
This is where you got your example? http://www.w3schools.com/jsref/met_win_cleartimeout.asp
To do it properly:
//Start initially:
var intervalHandler = setTimeout(changeImage, 3000);
myImage.onmouseover = function(){
clearInterval(intervalHandler);
}
myImage.onmouseout = function(){
//reset the variable, so it has the new timeout.
intervalHandler = setInterval(changeImage, 3000);
}
Make sure your setInterval function returns the timeout:
function clearInterval(timeout, period){
return clearTimeout(callback,period);
}
function myStopFunction(timeout) {
clearTimeout(timeout);
}
Btw to make sure you loop indefinitely you want to execute:
intervalHandler = setTimeout(changeImage, 3000);
at the end of your changeImage function.
I've built a very simply slider with Angular like so:
$scope.slider = {};
$scope.slider.pane = 1;
$scope.slider.auto = true;
var slider = function(){
$timeout(function(){
if ($scope.slider.pane === 4) $scope.slider.pane = 1;
else $scope.slider.pane ++;
slider();
}, 4000);
}
slider();
The slider function creates a timeout loop to change the value of slider.pane every 4s. In the HTML I have a link that when clicked sets the value slider.auto to false.
Stop slider
When this is clicked, it needs to stop the timeout loop. It may be in the middle of a cycle at the time, so I need to clear the timeout, but it's inside a function so not sure how to access it.
Use the $timeout.cancel function:
var timeout;
$scope.cancelTimer = function() {
$scope.slider.auto=false;
$timeout.cancel(timeout);
};
var slider = function(){
timeout = $timeout(function(){
if ($scope.slider.pane === 4) $scope.slider.pane = 1;
else $scope.slider.pane ++;
slider();
}, 4000);
}
slider();
//HTML
Stop slider
Try:
$scope.slider = {};
$scope.slider.pane = 1;
$scope.slider.auto = true;
var promise;
var slider = function(){
promise = $timeout(function(){
if ($scope.slider.pane === 4) $scope.slider.pane = 1;
else $scope.slider.pane ++;
slider();
}, 4000);
}
$scope.autoSliderFalse = function() {
$scope.slider.auto = false;
if(promise)
$timeout.cancel(promise);
});
slider();
HTML
Stop slider
You can use the cancel method as some people suggested here.
I actually think in your case you should use $interval instead of $timeout.
var interval = $interval(function(){
if ($scope.slider.pane === 4) {
$scope.slider.pane = 1;
}
else {
$scope.slider.pane ++;
}
}, 4000);
$scope.stopSlider = function(){
$interval.cancel(interval);
};
//html
Stop slider
I'm trying to clear an interval when the user hovers over an element and then start it up again when they hover off an element. I think this is a closure but I'm not sure, hopefully my code will make sense what I'm trying to do.
var rotatorInterval = function(elem){
var interval = setInterval(function(){
var active = elem.find('.dot.active');
if(active.is('.dot:last-of-type',elem)){
elem.find('.dot').first().click();
}else{
active.next().click();
}
},6000);
interval;
return interval;
};
if($('.rotator').length){
$('.rotator').each(function(){
var self = $(this);
rotatorInterval(self);
self.find('.slide, .dot').on('mouseenter',function(){
console.log('hovered');
clearInterval(interval);
});
});
}
I tried returning the interval from that closure but when I hovered it said interval (the name of the variable I returned) is not defined, so it's like it didn't return it or something.
You just have to actually return the interval reference somewhere
var rotatorInterval = function (elem) {
var interval = setInterval(function () {
var active = elem.find('.dot.active');
if (active.is('.dot:last-of-type', elem)) {
elem.find('.dot').first().click();
} else {
active.next().click();
}
}, 6000);
return interval;
};
if ($('.rotator').length) {
$('.rotator').each(function () {
var self = $(this);
var return_interval = rotatorInterval(self);
self.find('.slide, .dot').on('mouseenter', function () {
clearInterval(return_interval);
});
});
}
After calling a PHP function, which generates the HTML,
I call the function below for the specific slider id.
That works fine, hover pauses the slideshow, also ok.
But when I am hovering out of the section, firebug gives the following error:
TypeError: o.handler.apply is not a function
And the slideshow won't continue.
Thanks in advance.
function CallSlider(sliderid){
var $slider = $('#'+sliderid);
var $slide = 'li';
var $transition_time = 1000; // 1 second
var $time_between_slides = 2000; // 4 seconds
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
$('#'+sliderid).hover(function() {
clearInterval(sliderid);
}, sliderid = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
//alert('test');
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
)
);
}
I believe that error is related to the fact that hover() expects parameters to be functions.
Type: Function() - A function to execute when the mouse pointer enters/leaves the element.
http://api.jquery.com/hover/
I suggest putting your "hover off" code in its own function, like so:
$('#'+sliderid).hover(
function() {
// hover over
clearInterval(sliderid);
},
function () {
// hover off
sliderid = setInterval(...);
}
);
EDIT:
Here's an example, based on the code you provided, of how to keep things flexible (i.e. for dynamic lists).
var slide = 'li';
var transition_time = 1000; // 1 second
var time_between_slides = 2000; // 4 seconds
function startCycle($slider, $slides) {
return setInterval(
function () {
var $thisslide=jQuery(slide+'.active',$slider);
var $nextslide=($thisslide.next(slide).length?$thisslide.next(slide):$slides.eq(0));
$thisslide.removeClass('active').fadeOut(transition_time);
$nextslide.fadeIn(transition_time).addClass('active');
}, transition_time + time_between_slides
);
}
jQuery('ul.slider').each(function () {
var sliderid;
var $slider = jQuery(this);
var $slides = $slider.find(slide);
$slides.fadeOut();
// set active classes
$slides.first().addClass('active').fadeIn(transition_time);
$slider.hover(
function () {
// hover over
clearInterval(this.sliderid);
},
function () {
// hover off
this.sliderid = startCycle($slider, $slides);
}
);
this.sliderid = startCycle($slider, $slides);
});
http://jsfiddle.net/gk74V/1/
Suppose I have a few buttons and when they are clicked they trigger certain setInterval, but when I clicked on different button the previous setInterval doesn't clear or it say it is undefined.
example:
$("#button1").click(function () {
var url = "xxx";
var min = "yyy";
getGraphCredentials3(min,url);
var onehour = setInterval(function () {
getGraphCredentials3(min,url);
}, 5000);
clearInterval(twohour);
});
$("#button2").click(function () {
var url = "zzz";
var min = "uuu";
getGraphCredentials3(min,url);
var twohour = setInterval(function () {
getGraphCredentials3(min,url);
}, 5000);
clearInterval(onehour);
});
can anyone help please?
much appreciated
The scope of the onehour and twohour functions is the function in which they're declared, so they're not visible from the other callback.
You must declare your variables in a common scope. Do this :
var onehour, twohour;
$("#button1").click(function () {
var url = "xxx";
var min = "yyy";
getGraphCredentials3(min,url);
onehour = setInterval(function () {
getGraphCredentials3(min,url);
}, 5000);
clearInterval(twohour);
});
$("#button2").click(function () {
var url = "zzz";
var min = "uuu";
getGraphCredentials3(min,url);
twohour = setInterval(function () {
getGraphCredentials3(min,url);
}, 5000);
clearInterval(onehour);
});
Variable onehour and twohour are local to the function. If you declare them globally, it should work fine.