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.
Related
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);
})
})
I am using the Peity js plugin to create donut charts on my page. I am trying to animate the chart for each of the .foo elements:
<span class="foo" data-value="10"></span>
$('.foo').each(function () {
var updateChart = $(this).peity('donut');
var text = "";
var i = 0;
function myLoop() {
setTimeout(function () {
text = i + "/12";
updateChart.text(text)
.change()
i = i + 0.2;
var maxValue = $(this).data("value");
if (i <= maxValue) myLoop();
}, 0.5)
}
myLoop();
});
However it won't work for some reason with no errors in console. If I remove the $('.foo').each(function () { ... } part (and all "this" instances) the code will work. Thanks in advance for any help.
The problem is the context inside the timer handler, the easiest fix here is to use a closure variable
$('.foo').each(function () {
var $this = $(this);
var updateChart = $this.peity('donut');
var text = "";
var i = 0;
function myLoop() {
setTimeout(function () {
text = i + "/12";
updateChart.text(text)
.change()
i = i + 0.2;
var maxValue = $this.data("value");
if (i <= maxValue) myLoop();
}, 0.5)
}
myLoop();
});
When the timeout callback is executed, the this context refer to window, because you are actually calling window.setTimeout method.
Try this:
$('.foo').each(function () {
var updateChart = $(this).peity('donut');
var text = "";
var i = 0;
function myLoop() {
setTimeout($.proxy(function () {
text = i + "/12";
updateChart.text(text)
.change()
i = i + 0.2;
var maxValue = $(this).data("value");
if (i <= maxValue) myLoop();
},this), 0.5)
}
myLoop();
});
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);
});
});
}
I am new to OOP in Javascript or jQuery, I am trying to clear the interval and stop any methods inside the interval, it seems not working with what I did below.
function Timer() {
var sec = $('.timer #second');
this.runTimer = function(_currentime) {
var currentTimeing = parseInt($(_currentime).text());
this.timeInterval = setInterval(function() {
$('.projects li span.second').text(currentTimeing++)
}, 1000);
$("#stop").click(function() {
// clear interval
clearInterval(this.timeInterval);
})
}
}
var play = new Timer();
$("#start").click(function(){
//console.log(this.runTimer())
play.runTimer('#second');
})
You are using this in context of different functions, that's why it's not working fine. Try:
function Timer() {
var sec = $('.timer #second');
this.runTimer = function(_currentime) {
var currentTimeing = parseInt($(_currentime).text()), that = this;
that.timeInterval = setInterval(function(){
$('.projects li span.second').text(currentTimeing ++)
}, 1000);
$("#stop").click(function(){
// clear interval
clearInterval(that.timeInterval);
})
}
}
var play = new Timer();
$("#start").click(function(){
//console.log(this.runTimer())
play.runTimer('#second');
})
I'm simply saving reference to correct this in that variable, so I can later use it to clear interval.
function Timer() {
var sec = $('.timer #second');
var timeinterval; // declare timeinterval variable here
this.runTimer = function(_currentime) {
var currentTimeing = parseInt($(_currentime).text());
timeInterval = setInterval(function(){
$('.projects li span.second').text(currentTimeing ++)
}, 1000);
$("#stop").click(function(){
// clear interval
clearInterval(timeInterval);
})
}
}
var play = new Timer();
$("#start").click(function(){
//console.log(this.runTimer())
play.runTimer('#second');
})
See below. I'm trying to pass function(response) as a variable to be used in a progress bar function. That's the idea anyways. How do I call back the data = response to the var i = data in this case?
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
var data = 0;
setInterval(function () {
$('#divToRefresh').load('usercounter.php', function (response) {
data = response;
});
}, 100);
window.onload = function () {
var Animator = new function () {
var parent = document.getElementById('container');
var element = document.getElementById('test');
var target = document.getElementById('message');
this.move = function () {
var i = data;
var width = 0;
var timer = window.setTimeout(function () {
i += 1;
element.style.width = width + i + 'px';
}, 10);
};
};
Animator.move();
};
});
Not sure how your animator works or how those elements interact, but I'm guessing your goal is to call move periodically to refresh it's current status? So put that in the interval, and then make the retrieval of the count part of the animation. Not sure if that'll work for your scenario.
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
window.onload = function () {
var Animator = new function () {
var parent = document.getElementById('container');
var element = document.getElementById('test');
var target = document.getElementById('message');
this.move = function () {
$('#divToRefresh').load('usercounter.php', function (response) {
var i = response;
var width = 0;
var timer = window.setTimeout(function () {
i += 1;
element.style.width = width + i + 'px';
}, 10);
});
};
};
Animator.move();
setInterval(function () {
Animator.move();
}, 100);
};
});