problem with setInterval(); and clearInterval - javascript

I have a problem involving setinterval. It's probably best to show an example so here's a link here:
http://boudaki.com/testing/carouselTest
Basically I'm having problems making this work like I need it to. When the page loads the content rotates every three seconds and the numbered buttons on the right do so also. when you click on a button the buttons extend and the animation is stopped - all good. Then when you click the little close button at the bottom of the buttons the animation resumes - all good....but then when you come to click on the numbered buttons again the animation keeps on going. Why?
There's rather a lot of code but the setIntervals and clear intervals are:
line 69: on document.ready start the animation off -assign timerId to a global var
line 87: When the user clicks on the numbered button clearinterval in that animation
line 102: when the user clicks on the close button start the animation again
That's it....I just don't get why it doesn't stop the animation the second time around??? Can anyone see why?
Any ideas?

This is a guess, but try bringing all your functions and variables into the $(document).ready(function() {...}) call.
Then change your setInterval() so that you're passing in a reference to the function instead of a string for eval:
timerId = setInterval( rotateForward, 3000 );
Be sure to change all of them.
To be honest I don't know why this would work, but making the variable local may help to ensure that we're dealing with only one version of timerId.

$closeButton.click(function() { ... }); is inside of your loop. That handler is getting added 4 times, so when you click close, 4 timers are added and only 1 is cleared when you open the menu again.

I think the problem is the scoping of timerId. Try changing alert('should stop now'); to alert('should stop now' + timerId);
I'll bet you'll find that timerId is always the same value.

The only thing I can think of is... I'm pretty sure you can't put the () inside the setInterval call. It does seem to work at first, but maybe that's part of the issue? Hard to say... but I'd at least start there.
setInterval("rotateForward", 3000);
Also, maybe try calling the clearInterval every time before you start it.

Related

jQuery ScrollTop: Each animation needs to be finished before jumping to the next one

I'm using a live search plugin that uses scrollTop to scroll to found text on the page.
The code use keyboard arrow keys up and down to choose between results, the only problem is that due to the animation time of the scrollTop, the last action result won't be achieved before the result from the previous actions haven't been achieved after the animation time that is specified in the code.
What it means is that if I press down key too many times in a row, let's say 10 times, after the last item have been found on page, even if I immediately press the up key, I'll have to wait until the last 10 events have been executed, then it will execute the last event that uses the up key.
$('html,body').animate({scrollTop: mark.offset().top-100}, 100);
Working Fiddle
Is there anyway to cancel the previous event and jump to the next one if the key is pressed at the same time the animation is happening?
Ok I see the lag now, you will need to create a queue with jQuery first then clear it when the search changes direction with:
$(element).clearQueue();
I couldn't recreate the laggy effect you described. But there is a function in jquery animate you can use to achieve this.
$(element).stop()
I updated your jsFiddle to stop the previous animation before starting a new one, here.
Also you can read more about .stop() here.

Disabling Mouse Wheel for X Milliseconds with javascript?

I have a Website with RoyalSlider and Mousewheel support. http://www.linus.de/mark/drei.php
Everything works fine, but when i use my macbook (touchpad) the thing is that i fire several mousewheel events at a time when scrolling. so basically i want the script to pause for the time (or a bit less) it takes for one slide to change...
What i would need is a javascript which freezes the mousewheel for x milliseconds each time it's been triggered (after sending 1 or -1 to the slider)...
A Timer with a call back and a flag could work. When you start to scroll you set the flag and not allow the scroll wheel to function, see This Answer on how to disable the scroll wheel. When the timer fires (1 second or so) you reset the flag to let the person scroll again. See This page for how to set up a timer with a call back
I can't give you a full code example since you didn't give any code to us but here's the solution.
When you scroll the mouse, a scroll animation begins. Create a variable somewhere outside the event handler, let's say
var animationInProgress = false;
and set it to true right before the animation begining. Then, this RoyalSlider plugin must have some kind of complete handler (I bet it has - it's paid though) - a parameter where you can put a function to be called when the animation is over. So, you put there a function similar to that:
function() {
animationInProgress = false;
}
The last thing is to check the value of the animationInProgress variable each time you want to run an animation
if (false === animationInProgress) {
//run the animation
}
I hope you get the idea.

Make function execute after user hovers over link for 2 seconds

Yes, I know this question has been asked before, but I can't find an answer that works. This is an accepted answer from one of the other questions:
$('#element').hover(function()
{
$(this).data('timeout', window.setTimeout(function()
{
alert('hovered for 2 seconds');
}, 2000));
},
function()
{
clearTimeout($(this).data('timeout'));
alert('mouse left');
});
http://jsfiddle.net/nCcxt/
As you see it doesn't do what it's supposed to.
What I need is simple in theory but I can't get it to work - when a user hovers over a link for 2 seconds, a function is called. If the user moves the mouse away before 2 seconds pass, nothing happens.
The code works perfectly fine. It only breaks due to the alert() calls which causes the mouseout event to be triggered.
What do we learn from it? Do not use alert() in combination with focus/hover/mousemove-related events.
By the way, there are already jQuery plugins available for what you want to do: http://cherne.net/brian/resources/jquery.hoverIntent.html

Stop double click event on element with single click event

I have a JSFiddle here which lays out my problem: http://jsfiddle.net/Paddy/86YSN/7/.
It's a very simple marquee- the little white boxes simply move to the next/previous slide when clicked.
If you double click one, things go wrong, and a slide gets stuck out of position. I've been trying to find out how to simply disable the double click event for those elements for hours- I've tried this method:
$('#arrow_left').bind('dblclick',function(e){
e.preventDefault();
});
but no luck. Can anyone help?
(Many thanks).
You could forget about the dblclick event and just stop any animations already running by adding this line
$('.marquee_photos').stop(true,true);
into the functions called when processing the next animation. Working example -> http://jsfiddle.net/86YSN/11/
docs on stop() here
You should just check to see if its currently animated, if it isn't then go ahead and run your animation again. This allows your animation to finish, and I think is more in line with what you are wanting vs using the .stop().
if(!$('.marquee_photos').is(":animated")){
//your code here
}
JSFIDDLE HERE

Automatically hide a div using jQuery if it gets no MouseOver in a time interval

I have a workaround that shows a div when a menu item gets MouseOver, but hides both only when the div gets MouseOut. This is required for now.
However, if the div never gets MouseOver, it never hides. What I would like to do is automatically hide the div if it doesn't get MouseOver within a few milliseconds of showing.
The hiding after a time shouldn't be hard, but reseting this on a MouseOver challenges me. Any ideas?
Do something like:
function hideYourDiv() {
$("div#yourdiv").hide();
}
var theTimeout = setTimeout(hideYourDiv, 1000);
$("div#yourdiv").mouseover(function() {
clearTimeout(theTimeout);
});
edited to conform to "proper" use of setTimeout :P (though for simple stuff like this I sometimes prefer to pass it a string.. both work anyway)
You can use setTimeout() to set a timeout, but you can also use clearTimeout. Each time you get a mouseOver, you can clear the previous timeOut and set a new one.

Categories