/    Sign up×
Community /Pin to ProfileBookmark

setTimeout inside a "class" calling an inner method

LoL, don’t know if the title is very clear but here is my code:

!!! FORGOT TO SAY $field() is a shortcurt for document.getElementByID()

[CODE]function contador(campo,frases) {
this.flg = 0;
this.fld = campo;
this.frs = frases;
this.init = startMsg;
this.stop = stopMsg;
}

function startMsg() {
if (this.flg == 0) {this.flg = 1;this.pos = 0;}
$field(this.fld).innerHTML = this.frs[this.pos++];
if (this.pos == 4) this.pos = 0;
switch (this.fld) {
case “c_menu”: this.count = setTimeout(“cont_menu.init()”,500); break;
case “id_disp”: this.count = setTimeout(“cont_id.init()”,500); break;
case “cnpj_disp”: this.count = setTimeout(“cont_cnpj.init()”,500); break;
case “cpf_disp”: this.count = setTimeout(“cont_cpf.init()”,500); break;
case “login_disp”: this.count = setTimeout(“cont_log.init()”,500); break;
case “data_fua”: this.count = setTimeout(“cont_dfua.init()”,500); break;
case “data_fia”: this.count = setTimeout(“cont_dfia.init()”,500); break;
}
}

function stopMsg() {
clearTimeout(this.count);
$field(this.fld).innerHTML = “”;
this.flg = 0;
}[/CODE]

the cont_*.init() are instances of the contador “class”. I did this way cause I don’t know a way of using the setTimeout to call the method of the original instance. It works this way, but I’m a freak of nice coding.

Already tried

[CODE]
this.count = setTimeout(“init()”,500);
this.count = setTimeout(this.init,500);
this.count = setTimeout(“startMsg()”,500);
this.count = setTimeout(this.startMsg,500);
[/CODE]

Someone has a suggestion?

to post a comment
JavaScript

12 Comments(s)

Copy linkTweet thisAlerts:
@hansschmuckerDec 18.2006 — Lol, seems like I'm posting this all over the place, but it's simply what you want:

http://www.tapper-ware.net/

Look for the "methodize" function... it allows you to create a callback function that runs a given function in a supplied scope.
Copy linkTweet thisAlerts:
@cyberowlauthorDec 18.2006 — Humm, I read it, think I understood it and wrote this:
[CODE]
function contador(campo,frases) {
this.flg = 0;
this.fld = campo;
this.frs = frases;
}

contador.prototype.init = startMsg;
contador.prototype.stop = stopMsg;

function startMsg() {
if (this.flg == 0) {this.flg = 1;this.pos = 0;}
$field(this.fld).innerHTML = this.frs[this.pos++];
if (this.pos == 4) this.pos = 0;
this.count = setTimeout("methodize(this.init,this)",500);
}

function stopMsg() {
clearTimeout(this.count);
$field(this.fld).innerHTML = "";
this.flg = 0;
}

function methodize(methodize_func,methodize_scope){
return (function(){methodize_func.call(methodize_scope);});
}[/CODE]


But doesn't work. Did I miss something, or maybe is the setTimeout?
Copy linkTweet thisAlerts:
@hansschmuckerDec 18.2006 — No quotes! I don't know why everyone wants quotes, but all eventListener properties take functions as arguments, not strings!

this.count = setTimeout(methodize(this.init,this),500);
Copy linkTweet thisAlerts:
@cyberowlauthorDec 18.2006 — LoL, sorry for the quotes. Thought that they were necessary when u pass a function with parameters in the setTimeout function. All the examples that I saw were like that:

setTimeout("function()",500);

or

setTimeout(function,500);

think I need to read a little more about setTimeout.

It worked perfectly, that's a really useful tip. Thank you hansschmucker for your time. I appreciate.
Copy linkTweet thisAlerts:
@hansschmuckerDec 18.2006 — That's the beauty of it: You actually don't pass a function with parameters to setTimeout. Instead you call methodize and it returns a function, which is then assigned to the Timeout ? . That all eventListeners also accept strings is actually not meant to be used in Javascript... it's just there so people can use it to define eventListeners inside their HTML. Sadly, very few people seem to realize into how much trouble you get with Strings... especially if you're doing OOP
Copy linkTweet thisAlerts:
@cyberowlauthorDec 18.2006 — Oh, great, thanks. Now I got it. dahhhhh. I'm an (old) dummie boy.....
Copy linkTweet thisAlerts:
@hansschmuckerDec 18.2006 — Methodize is a regular function... it gets executed, and what it returns get assigned to the Timeout.

It's like alert(Math.random());

First. Math.random gets executed and what it returns gets passed on to alert.

Only difference is that Methodize doesn't return a value like Math.random(). Instead, it returns a function!

The whole thing is necessary, because in JS, when an event launches a function, it doesn't launch it within it's native scope, but instead in the scope of the element that triggered the event.

So we need a function, which calls the function we want in the scope we want: "this"

We could usually create such a function directly where we need it, but because of how JS treats variables, we'll always end up with and outdated reference to a variable.

That's why we have to seperate it into a second function, because when you pass something to a function, the variable gets copied, not just linked.
Copy linkTweet thisAlerts:
@hansschmuckerDec 18.2006 — Great... I've just finished typing and you remove you post ?
Copy linkTweet thisAlerts:
@cyberowlauthorDec 18.2006 — I got it now hansschmucker.

I've sent my last reply before having yours on the screen. Now I corrected it.

Never thought about this approach, really nice.

I'm pretty fresh in JavaScript, but the idea is quite simple for me since I'm a Java Programmer. Thanks again for the tip and principally for the explanation.
Copy linkTweet thisAlerts:
@cyberowlauthorDec 18.2006 — They should implement AJAX here so we wouldn't have this kind of problem ?
Copy linkTweet thisAlerts:
@hansschmuckerDec 18.2006 — The worst thing about AJAX is that 90% of all developers have never heard of OOP... and then they are surprised that they can't reuse their code and have to do major rewrites everytime a new browser version appears. But why should they care? After all, their AJAX developers, and I'm just a lousy Javascript freak ?
Copy linkTweet thisAlerts:
@cyberowlauthorDec 19.2006 — Your methodize function is really great.

I'm using it now to be able to use the setTimeout to call functions that need parameters.

That's was a headache for me before.

Really a great idea.?
×

Success!

Help @cyberowl spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...