Develop Reference

How to execute the same setInterval()

I have an issue with my setInterval(), my code is:
var1=0;
function addNum(){
var1++;
$('.number').text(var1);
}
$(function() {
$('.number').text(var1);
jQuery('#box').on('touchstart touchmove', function(e) {
mytimer = setInterval(function(){ addNum() }, 500);
});
jQuery('#box').on('touchend touchcancel', function(e) {
alert('lift up');
window.clearInterval(100);
});
});
I can't clearInterval()
How can I use the same setInterval for the next time?
Somebody knows, how to reuse it?
BR,
Christian

Change your clear function to window.clearInterval(mytimer);

Loop animation 3 times and return to start

I have this code running an animation and I need to to stop and revert to a relatable event after 3 blinks.
$(window).load(function(){
$(function () {
function run_animation($element, delay, duration) {
$element.delay(delay).fadeOut(duration, function () {
$('.countdown-li').html("<li class='countdown-li'><a>Price updated</a>").fadeIn();
run_animation($element, delay, duration);
});
}
run_animation($('.countdown-li').delay(3000));
});
});

You can use a jQuery timer to stop animation after a certain amount of time you want, so try this script:
<script>
$(window).load(function () {
$(function () {
function run_animation($element, delay, duration) {
$element.delay(delay).fadeOut(duration, function () {
$('.countdown-li').html("<li class='countdown-li'><a>Price updated</a>").fadeIn();
run_animation($element, delay, duration);
});
}
run_animation($('.countdown-li').delay(3000));
setTimeout("$('.countdown-li').stop();", 5500);
});
});
</script>

I could have used the setinterval timer option found in javascript. http://javascript.info/tutorial/settimeout-setinterval

jquery how to stop settimeout from looping

I want after my page loads to do a trigger click once and only once.
many posts swear that settimeout only fires once, but in my case it is infinite!
here is one of my many trials.
$( document ).ready(function() {
setTimeout(function() {
$("#btn1").trigger('click');
},1000);
});
I have tried moving that into a function outside the document.ready and then add cleartimeout, but then it stops from firing at all:
$( document ).ready(function() {
test();
});
function test() {
var t = setTimeout(function() {
$("#btn1").first().trigger('click');
},1000);
clearTimeout(t);
}
What am I doing wrong!?

use clearTimeout() inside the setTimeout().It clears the timeout after triggering the click
$(document).ready(function() {
test();
});
function test() {
var t = setTimeout(function() {
$("#btn1").trigger('click');
clearTimeout(t);
}, 1000);
}
$("#btn1").on('click',function(){
console.log("Clicked");
});
Fiddle: http://jsfiddle.net/6G4pR/

use e.stopPropagation(), this might be because of event bubbling.
HTML
<button id="btn1">my button</button>
JS
$( document ).ready(function() {
setTimeout(function() {
$("#btn1").trigger('click');
},1000);
$("#btn1").click(function(e){
console.log('clicked');
e.stopPropagation();
console.log(e);
})
});
CODE

Delay jQuery fadeIn due to unwanted behavior

How do I make my .right-menu DIV to fadein only after a couple of moments the mouse is hovering its parent .right-menu-background ? The thing is that when you move the cursor quickly in and out, .right-menu DIV is reappearing a lot of times after.
How do I delay animation for few ms?
Here's the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").fadeIn();
}
,function(){
$(this).find(".right-menu").fadeOut();
}
);
});

a easy fix is to use .stop()
$(function () {
$(".right-menu-background").hover(function () {
$(this).find(".right-menu").stop(true, true).fadeIn();
}, function () {
$(this).find(".right-menu").stop(true, true).fadeOut();
});
});
using timer
$(function () {
$(".right-menu-background").hover(function () {
var el = $(this).find(".right-menu");
var timer = setTimeout(function(){
el.stop(true, true).fadeIn();
}, 500);
el.data('hovertimer', timer);
}, function () {
var el = $(this).find(".right-menu");
clearTimeout(el.data('hovertimer'))
el.stop(true, true).fadeOut();
});
});

Use the stop() function in front of fading calls ...stop(true, true)
With those two parameters set to true, the animation queue is cleared and the last animation is played this will get ride of the weird effect
$(this).find(".right-menu").stop(true, true).fadeIn();

Use .delay() function.
Here is the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").delay(800).fadeIn(400);
},function(){
$(this).find(".right-menu").fadeOut(400);
});
});
Check the demo here: http://jsfiddle.net/Mju7X/

clearInterval() Undefined Error After Using setInterval()

I know this isn't supposed to be inline, but YUI library's dialogs force me to. My issue is that whenever I hover over this div, the margin-left scroll activated but it does not stop when I move the mouse out of the div. The JS console reports that:
Uncaught ReferenceError: timerID is not defined
And here's the code:
<div class="span1" onmouseover="
var timerID;
$(document).ready(function(){
timerID = setInterval(scrollLeft, 10);
function scrollLeft(){
$('.inner_wrapper').animate({
marginLeft: '-=30px'
});
}
});
" onmouseout="clearInterval(timerID)">
</div>
EDIT: The thing is that I can NOT run SCRIPT tags inside dialogs (they are already created via scripts, which filter any javascript besides inline one like onmouseover and onmouseout). So your suggestions of encapsulating the onmouseover and onmouseout handles in a single function will not work in this case.

It's a scope problem. You variable timerID is not visible in onmouseout.
Generally it is a good idea, to put stuff into a function instead of clobbering it all into the attributes. This avoids all these scope-problems. And it's an even better idea to use handlers instead of the on-...-atrributes.
Define your function outside the onmouseover attribute and call another function in the mouseout which clears it.
Something like this (to avoid nasty global varaibles)
var handler = (function(){
var timerID;
function scrollLeft(){
$('.inner_wrapper').animate({
marginLeft: '-=30px'
});
}
return{
mouseover:function(){
timerID = setInterval(scrollLeft, 10);
},
mouseout:function(){
clearInterval(timerID);
}
}
})();
and then
<div class="span1" onmouseover="handler.mouseover()" onmouseout="handler.mouseout()">
or even better, bind the handlers directly via:
$('.span1').hover(function() {
timerID = setInterval(scrollLeft, 10); //mouseover
}, function() {
clearInterval(timerID); //mouseout
});
As of new jQuery 1.7, .on()should be preferred.

$(document).ready(function() {
var timerID = null;
function scrollleft() {
$('.inner_wrapper').animate({
marginLeft: '-=30px'
});
}
$('div.span1').hover(function() {
timerID = setInterval(scrollLeft, 10);
}, function() {
clearInterval(timerID);
});
});​
and make you html like
<div class="span1"></div>
If you use .on('hover') then
$(document).ready(function() {
var timerID = null;
function scrollleft() {
$('.inner_wrapper').animate({
marginLeft: '-=30px'
});
}
$('div.span1').on('hover', function(e) {
if(e.type == 'mouseenter') {
timerID = setInterval(scrollLeft, 10);
} else {
clearInterval(timerID);
}
});
});

It is not good to mix up your markup and JavaScript. Split them and work separately as follows.
HTML:
<div class="span1"></div>
JavaScript:
var timerID = null;
function scrollLeft() {
$('.inner_wrapper').animate({
marginLeft: '-=30px'
});
}
$(document).ready(function() {
$(".span1").hover(function() {
timerID = setInterval(scrollLeft, 10);
}, function() {
clearInterval(timerID);
});
});

timerID is defined in onmouseover, but not in onmouseout.
So what you can do is following:
<script type="text/javascript">
var scrollLeft = function(){
$('.inner_wrapper').animate({
marginLeft: '-=30px'
});
};
var timerID;
$(document).ready(function(){
$("#timer").mouseover(function() {
timerID = setInterval(scrollLeft, 10);
}).mouseout(function() {
clearInterval(timerID)
});
});
</script>
<div class="span1" id="timer"> </div>

Your
var timerID;
variable is defined as a local variable inside the onmouseover handler, so the onmouseout handler doesn't know about it.
Declare it either as a global variable, or better - encapsulate it into an object, which will contain timerID as a field and mouseover and mouseout handlers as methods.