setInterval function not working - javascript

I seem to not be able to call the setInterval function like this:
this.timerHandler = setInterval(function(this.myTimerFunction){},1000)
It seems that if I make a global function and call that, the code works perfectly but it seems that calling a function locally using this, it won't work. I have tried calling this.myTimerFunction just before this line of code and it actually executes the code and works perfect, it's just that it seems it does not want to execute the function from a timer handler.
Any suggestions to try and fix this? this.myTimerFunction is a prototype function btw.

the syntax is wrong, you also have to take into account the context
var that=this; //save context
this.timerHandler = setInterval(function(){ //You can not use "this." like parameter
that.myTimerFunction(params);
},1000)
if you don't need send parameters in your function you can use
this.timerHandler = setInterval(this.myTimerFunction,1000);

setInterval takes a function and an interval.
function(this.myTimerFunction){}
should just be:
this.myTimerFunction
or
this.myTimerFunction.bind(this)
You may not need the bind if the context doesn't matter.

Try this:
this.timerHandler = setInterval(this.myTimerFunction, 1000);

Related

jQuery.ready and this

I have a web page that load a lot of javascript files.
Each javascript do a specific action.
I'm using this model in each javascript file:
"use strict";
$(function() {
var self = this;
// some code
var func1 = function() {
// do some action
};
var runTimer = function() {
func1();
setTimeout(self.runTimer, 60000);
}
});
BUT "this" in this case point to html document and I would like to point to the function itself.
How can I achieve it?
Is there any better "model" to use?
My webpage is like a lot of widgets running at same time and each javascript file run a specific widget.
Thank you very much.
I am not seeing a proper reason for you doing this. If you want to assign a function to a variable just use:
var functionVariable = function() { ... }
Maybe if you tell us why you want to do this out answers will be more specific.
From what you've written it looks like you want to call func1() every 60 seconds. Rather than set up a function like runTimer() that recursively calls setTimeout, just use setInterval. Rather than having the function runTimer(), just use:
var timer = setInterval(func1, 60000);
and if/when you want to cancel this and stop func1 being called, use:
clearInterval(timer);
From what I can see you're only using self/this to achieve this, and there's a better/more straightforward way of doing this. If there's another reason you want to set self=this, can you add to your code sample or try to clarify what you want to acheive?
Have a look at the proxy function: it does exactly that

Redefining a function which is part of another function

I have a function that looks like this:
function outer() {
function inner_1() {
alert('inner_1');
}
function inner_2() {
alert('inner_2');
}
function inner_3() {
alert('inner_3');
}
inner_1();
inner_2();
inner_3();
}
I need to call outer(), but I want to replace inner_1() with another function.
I have tried this:
new_outer = outer;
new_outer.inner_1 = function() {
alert('my new inner function');
};
If I try to call the newly redefined inner_1 like this:
new_outer.inner_1();
it works as expected ('my new inner function' is alerted).
But if I try to call the outer function:
new_outer();
the old version of inner_1 is called.
I want to redefine inner_1 and the call outer. How can I achieve this?
This seems like a really bad idea so I am not going to post any code. However, if you are pursuing the answer for "educational purposes only", I will just hint that although you cannot easily redefine a function from outside its scope (as per your example), there is nothing stopping you from redefining a function attached to a function object.
I do think, however, there is a better solution to whatever the problem you are trying to solve is.

Ajax returned variable issue

I am trying to assign the ajax callback function variable value to the existing variable.
I have
function test(){
}
test.prototype.click=function(){
this.count;
//call ajax codes.....
//ajax callback function
ajax.callback=function(var1){
//I want to assign returned data to this.count property.
this.count=var1.length
}
}
test.prototype.show=function(){
//wont work, it will show undefined...
alert(this.count);
}
var t=new test();
t.click();
t.show();
I think it's the scope issue but I don't know how to solve this. Any idea? Thanks in advance.
Yeah, using this within another scope causes all kinds of issues, so you need to work around this. One way is to avoid using this entirely by defining your function differently. For instance, you can define count like so:
function test() {
function count() {
}
...
And just use count() without the this. prefix.
You can also set a variable to this and use that to refer to count within your other scope. For instance:
var self = this;
Scoping issues with this can be a pain in the neck and can occur when you do more OO with callbacks. It's good you got introduced to this early on, so now you know to be on guard.

Why isn't this setInterval working?

The code:
setInterval("doSomething()", 2000);
function doSomething(){alert('hi')}
demo: http://jsfiddle.net/PRff7/
I've been reading about this and I just can't get the example to work :(
Your code isn't executing because of jsfiddle. It wrapped your code in an onload handler, thus keeping doSomething out of the global namespace. So when setTimeout tried to execute your code, it couldn't find doSomething. Change jsfiddle to execute "no wrap", and all is well: http://jsfiddle.net/gilly3/PRff7/3/
If you don't wrap your call to doSomething in a string, it will also work because setInterval gets a direct reference to doSomething which is in the same scope. It doesn't need a global reference.
You need to change it to
setInterval(doSomething, 2000);
function doSomething(){alert('hi')}
You shouldn't pass a string to setInterval.
Instead, pass the function itself:
setInterval(doSomething, 1000);
If you want to leave your code inline, and not to delegate it to some named function (especially if code consists of more than one command), use this:
setInterval( function(){ alert('hi'); alert('hello') }, 2000);

Why setTimeout() function runs only once?

I am making a javascript bookmarklet that resizes all images, periodically.
javascript: function x(){
for(i=0;i<=document.getElementsByTagName('img').length;i++)
document.getElementsByTagName('img')[i].width+=1;
};
t = window.setTimeout("x()",100);
void(0);
But it runs only once. What is the problem here??
Are you looking for setInterval() instead of setTimeout() by any chance?
t = window.setInterval("x()",100);
Here is the same code properly indented for clarity
function x() {
for(i=0;i<=document.getElementsByTagName('img').length;++)
document.getElementsByTagName('img')[i].width+=1;
};
t = window.setTimeout("x()",100);
void(0);
window.setTimout() executes the passed code only once because it is meant to. If you want to execute code more often, use window.setInterval().
Shouldn't it be i++ at the end of your for loop?
Also there is a syntax error.
for(i=0;i<=document.getElementsByTagName('img').length;i++)
You need to put the...
t = window.setTimeout("x()",100);
inside the function x() brackets { } and it works with SetTimeout()
function x() {
for(i=0;i<=document.getElementsByTagName('img').length;i++)
document.getElementsByTagName('img')[i].width+=1;
t = window.setTimeout("x()",100);
};
x();
void(0);
You can only call x() after all the images have been loaded on the page or there is an error.
It might be window.setTimeOut("x",100)
Edit : correct the answer to this window.setTimeout(x,100).
PS: thats what happens if you simply work with a IDEs.

Categories

Resources