I have a small problem.
The code is like this:
var myModule = (function() {
var _fun = function() {
console.log('dummy content');
};
var _init = function() {
_fun();
};
return {
init: _init,
}
})();
setInterval(myModule.init, 1000);
Is there any option to clearInterval() right after setInterval() and then start it once again ?
I would like to achieve something like this because each time I seInterval() I should clear it but unfortunately I don't know how to do this :/
Any suggestions ?
Simply assign setInterval return value to a variable and then use clearInterval on it, eg:
var myVar = setInterval(myModule.init, 1000);
clearInterval(myVar);
var myModule = (function() {
var _fun = function() {
console.log('dummy content');
};
var _init = function() {
_fun();
};
return {
init: _init,
}
})();
var interval = setInterval(myModule.init, 1000); // creates interval
clearInterval(interval); // clears the interval created above
When you set your interval keep a reference to it:
intervalObj = setInterval(yourCallbackFuction, INTERVAL_TIME);
Then clearing it:
clearInterval(intervalObj);
Related
i have a problem accessing variable inside method in OOP.
this is my code :
var slideshow = {
elSet : $(".slideshow"),
next : function() {
},
swipe : function() {
var clear = this.autorun().loop;
onSwipe(function() {
clearInterval(clear); // not working
});
},
autorun : function() {
var self = this;
var loop = setInterval(function() {
self.next();
}, 5000);
},
initial : function() {
this.swipe();
this.autorun();
}
}
slideshow.initial();
i want to clearInterval from variable loop,
on browser console return error TypeError: this.loop(...) is undefined
what's wrong with my code?
Just assign the interval id returned by setInterval to a variable you can access, or like Barmar's answer return it.
var slideshow = {
elSet: $(".slideshow"),
next: function() {
},
swipe: function() {
var self = this;
onSwipe(function() {
//use the interval id to cancel
clearInterval(self.intervalRef);
});
},
// variable to store the interval id
intervalRef: null,
autorun: function() {
var self = this;
//assign the interval id generated by setInterval to a variable you can access
this.intervalRef = setInterval(function() {
self.next();
}, 5000);
},
initial: function() {
this.swipe();
this.autorun();
}
}
slideshow.initial();
Issues:
var clear = this.autorun().loop; Here this will have scope swipe and not object.
var loop = setInterval(function() {}) Here loop will have scope of autorun and will expire after function execution is over.
You can try something like this:
JSFiddle
function SlideShow() {
// self will hold current object reference for all functions
var self = this;
var interval = null;
function next() {
console.log('next');
}
function swipe() {
onSwipe(function() {
console.log("Clearint Interval")
clearInterval(interval);
});
}
// Private function
function onSwipe(callback) {
console.log("On Swipe");
// Check if value is passed and its a function
if (callback && typeof(callback) === 'function')
callback();
}
function loop() {
interval = setInterval(function() {
next();
}, 5000);
}
function init() {
swipe();
loop();
}
// Public properties
return {
elSet: $(".slideshow"),
next: next,
swipe: swipe,
loop: loop,
initial: init,
interval: interval
}
}
// Create a new instance of SlideShow
var slideshow = new SlideShow();
slideshow.initial();
In the swipe function, you have:
var clear = this.autorun().loop;
This expects this.autorun() to return an object, and tries to access the loop property of that object, which should contain the ID of an interval function. But autorun doesn't return anything, let alone an object with a loop property.
Change autorun to:
autorun : function() {
var self = this;
var loop = setInterval(function() {
self.next();
}, 5000);
return loop;
}
Then you can do:
var clear = this.autorun();
You also shouldn't call this.autorun() in the initial function. It's already called by this.swipe(). Running it again will cause two interval functions to run, and the ID of the second one isn't saved anywhere so that you can clear it.
I have a JS that creates a graph. The graph is rendered first and keeps updating it every 3 seconds as below.
I would like to stop the execution of the script using clearInterval or some other way whenever a button is clicked. How can I achieve that?
I understand how clearInterval works, but, I am not able to figure out how to control the nested setInterval depending on an event.
Disclaimer: I am kinda new to JS etc.
mystats = function () {
this.render = function() {
var graph = vendorgraph();
graph.render();
setInterval( function() {
jsonupdate.addData(seriesData,url);
graph.update();
}, 3000 );
}
}
var mytrends = new mystats();
mytrends.render();
setInterval returns a value, you can use that value to stop it later, maybe by storing it in some interval array.
var intervalArray = [];
mystats = function () {
this.render = function() {
var graph = vendorgraph();
graph.render();
var interval = setInterval( function() {
jsonupdate.addData(seriesData,url);
graph.update();
}, 3000 );
intervalArray.push(interval);
}
}
// later on
var intervalVariable = intervalArray[0];
clearInterval(intervalVariable)
I got a hint from other post by Zach and solved it this way
mystats = function () {
var interval;
this.render = function() {
var graph = vendorgraph();
graph.render();
interval = setInterval( function() {
jsonupdate.addData(seriesData,url);
graph.update();
}, 3000 );
}
this.stoprender = function() {
clearInterval(interval);
}
}
var mytrends = new mystats();
mytrends.render();
on my event {
mytrends.stoprender();
}
I am having a hard time getting a countdown timer working as I don't know what I am doing wrong. I am trying to setup a countdown timer using jQuery in a prototype.
The main problem I see so far is at the setInterval:
_self.counter = setInterval(_self.runTimer(_self),1000);
When I don't pass in the "this" I get NaN but when I do the countdown only happens once and then stops.
Here is my JSFiddle work so far:
http://jsfiddle.net/f9GN7/
Thank you in advance.
I've modified a little of your code, I changed setInterval to setTimeout.
var timer_code = function(){
this.counter;
this.timeCountDown = 30;
}
timer_code.prototype = {
init : function(){
var _self = this;
$('#start').on('click',function(e){
_self.setTimer();
});
},
setTimer : function(){
var _self = this;
// _self.counter = setInterval(_self.runTimer(_self),1000);
var timerLoop = function(){
if(_self.timeCountDown > 0){
_self.runTimer();
setTimeout(timerLoop, 1000);
}
};
timerLoop();
},
runTimer : function(){
var _self = this;
_self.timeCountDown--;
if(_self.timeCountDown <= 0){
// clearInterval(_self.counter);
$('#timer').html("DONE");
return;
}
$('#timer').html(_self.timeCountDown);
console.log(_self.timeCountDown);
}
}
var timer = new timer_code();
timer.init();
http://jsfiddle.net/f9GN7/1/
setInterval gets a function reference as its first parameter ..
This function may not return a function object, the function call you just passed needs to be called in the scoope of a closure
Keeping your code with just a few modifications :
setTimer: function(){
if(this.counter)
clearInterval(this.counter); // timer may have already been launched, it may need to be cleared if its value is an integer and is != 0
this.counter = setInterval(
(function (ref) {
return function () {
ref.runTimer();
}
})(this),
1000);
}
See Fiddle Here
Let's assume that I have the timeout ID returned from setTimeout or setInterval.
Can I get, in some way, the original function or code, associated with it?
Something like this:
var timer_id = setTimeout(function() {
console.log('Hello Stackoverflowers!');
}, 100000);
var fn = timer_id.get_function(); // desired method
fn(); // output: 'Hello Stackoverflowers!'
You can put a wrapper around setTimeout - I just threw this one together (after a few iterations of testing...)
(function() {
var cache = {};
var _setTimeout = window.setTimeout;
var _clearTimeout = window.clearTimeout;
window.setTimeout = function(fn, delay) {
var id = _setTimeout(function() {
delete cache[id]; // ensure the map is cleared up on completion
fn();
}, delay);
cache[id] = fn;
return id;
}
window.clearTimeout = function(id) {
delete cache[id];
_clearTimeout(id);
}
window.getTimeout = function(id) {
return cache[id];
}
})();
NB: this won't work if you use a string for the callback. But no one does that, do they..?
Nor does it support passing the ES5 additional parameters to the callback function, although this would be easy to support.
var timeouts = {}; // hold the data
function makeTimeout (func, interval) {
var run = function(){
timeouts[id] = undefined;
func();
}
var id = window.setTimeout(run, interval);
timeouts[id] = func;
return id;
}
function removeTimeout (id) {
window.clearTimeout(id);
timeouts[id]=undefined;
}
function doTimeoutEarly (id) {
func = timeouts[id];
removeTimeout(id);
func();
}
var theId = makeTimeout( function(){ alert("here"); }, 10000);
console.log((timeouts[theId] || "").toString());
timeouts[theId](); // run function immediately, will still run with timer
You can store each timeout function in an object so that you can retrieve it later.
var timeout_funcs = {};
function addTimeout(func,time) {
var id = window.setTimeout(func,time);
timeout_funcs[id] = func;
return id;
}
function getTimeout(id) {
if(timeout_funcs[id])
return timeout_funcs[id];
else
return null;
}
function delTimeout(id) {
if(timeout_funcs[id]) {
window.clearTimeout(timeout_funcs[id]);
delete timeout_funcs[id];
}
}
the IDs returned from setTimeout/setInterval are just numbers, they have no properties or methods other than those that every other number would have. If you want to get that function, you can declare it first instead of using an anonymous:
var myFunc = function() {
console.log('Hello Stackoverflowers!');
};
var timer_id = setTimeout(myFunc, 100000);
myFunc(); // output: 'Hello Stackoverflowers!'
clearTimeout(timer_id); // unless you want it to fire twice
I have the following HTML page:
<html>
<script>
var global = {};
global.obj = {
// when called this function will cause 'hello' to be output to the
// console every 1 second
repeat: function () {
setInterval(function () {
console.log('hello');
}, 1000);
}
}
global.obj.repeat();
global.obj = [];
// even after we overwrite global.obj, 'hello'
// continues to be output to the console every second
</script>
</html>
I want to write a function similar to repeat, except when global.obj is overwritten, setInterval will stop being called
You'll want to use getters/setters, Mozilla has some good docs on this.
You may have to tweak it a bit:
var intervalRef = null;
var global = {objRef: {}};
global.__defineSetter__("obj", function(o) {
if (intervalRef)
clearInterval(intervalRef);
intervalRef = null;
global.objRef = o;
});
global.__defineGetter__("obj", function() {
return global.objRef;
});
global.obj = {
repeat: function () {
intervalRef = setInterval(function () {
console.log('hello');
}, 1000);
}
}
global.obj.repeat();
setTimeout(function() { //this just demonstrates that you can let it run for 5 secs before clearing the timer.
global.obj = [];
}, 5000);
I tested this and verified that it works.
See this Fiddle:
// html
<p id="stopper">Click</p>
// js
var counter = new Object();
counter.timer = setInterval( function(){
console.log("Hello!");
}, 1000 );
$("#stopper").click(function(){
console.log("Stopping");
clearInterval(counter.timer);
});