Rick Strahl's Weblog  

Wind, waves, code and everything in between...
.NET • C# • Markdown • WPF • All Things Web
Contact   •   Articles   •   Products   •   Support   •   Advertise
Sponsored by:
Markdown Monster - The Markdown Editor for Windows
advertise here

JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

March 28, 2006   •   53 comments
:P
On this page:

 

Here's one I've been struggling with for a bit now. I need to make a setTimeout() call to a method or function inside of a class and pass a parameter. Say I'm in a method and inside of that method I need to fire a request to do delayed execution of another method in the same class.

 

Outside of classes you can do this:

 

if (Timeout && Timeout > 0)

    window.setTimeout("HideToolTip('" + ControlId + "')",Timeout);

 

This works fine with plain global functions. But now imagine you have a method in a class:

 

this.ShowToolTip =  function (Message,Timeout,Position)

{

      …

 

if (Timeout && Timeout > 0)

    window.setTimeout("this.HideToolTip('" + ControlId + "')",Timeout);

}

 

this.HideToolTip = function(ControlId)

{

      … do something with ControlId

}

 

Now how do you set up the call for window.setTimeout()? Hint: The above doesn't work <s>. The reason is that window.setTimeout doesn't call from within the context of the class so 'this' is not in scope – and the call fails. Same applies if you don't make HideToolTip a class method but plain function inside of the class – it still won't be visible to the window object and setTimeout.

 

Calling the method is really not that big of a problem. Instead of a string you can pass in an event handler object reference, so you can do this:

 

if (Timeout && Timeout > 0)

    window.setTimeout(this.HideToolTip,Timeout);

 

That works in firing the method or function, but there's unfortunately no way to pass a parameter. Well, officially there may be.

 

Incidentally I was browsing through my JavaScript Bible that mentioned this working:

 

window.setTimeout(this.HideToolTip,Timeout,ControlId);

 

and it actually works in FireFox, but unfortunately not in InternetExplorer. Looking online though I don't see this syntax referenced in any of the browser references. So that's out… Too bad cause that would have been easy.

 

What about calling the class method and letting class properties deal with 'passing' of values? So instead of trying to pass a ControlId why not set a property on the object or use some property, something like this (using ATLAS for that matter):

 

this._hideToolTip = function (ControlId)

{

    var ControlId = $(this.element.id);

    var Ctl = $(ControlId +  "_ToolTip");

    if (Ctl == null)

        return;

    Ctl.style.display="none";

    Ctl = $(ControlId +  "_ToolTipShadow").style.display="none";

}

 

Seem logical OO – but nope that doesn't work. When the setTimeout call is made this, doesn't refer to your object, but to the window object. Grrr… so much for object orientation in JavaScript.

 

 

So what's the answer here? Actually I've been looking at how ATLAS does this, but I can't for the life of me get ATLAS events using eventArguments to fire for me either. The events get hooked up but they just never actually trigger the handlers.

 

So anybody have any ideas on to make call another method in a class with the proper context?


The Voices of Reason

 

Marc Brooks
March 28, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

You need to curry the value into scope by binding it into the inherited scope of the inner method. take a gander into how prototype.js Bind works.

Jeff Lewis
March 28, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

There is probably an easier way, but the following works in IE and FireFox:

<html>
<body>

<script>
function MyClass() {
}

MyClass.prototype.setTimer = function(msg) {
var myClass = this;

function timerRelay() {
myClass.handleTimer(msg);
}

alert("Starting timer");
setTimeout(timerRelay, 1000);
}

MyClass.prototype.handleTimer = function(msg) {
alert(msg);
}

var c = new MyClass();
c.setTimer("Hello");
</script>
</body>

</html>

Bertrand Le Roy
March 28, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

I think what you're looking for is implemented in Atlas by
var cbk = Function.createCallback(myFunction, myParameter);
window.setTimeout(cbk, 1000);

The cbk function will remember the context parameter for the function.

Also take a look at Function.createDelegate.

Does this help?

Ramon Leon
March 29, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

It's easier when you stop thinking OO, this is a functional thing, stop passing strings to setTimeout, pass an anonymous function instead, it'll take it's current environment with it as a closure.

var self = this;
setTimeout(function(){
self.HideToolTip(ControlId);
}, 200);

Using this can be tricky, safer to tuck it into a variable then reference the variable to avoid any weird scope issues.

Ramon Leon
March 29, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

BTW, general overal tip, stop passing string altogether, it's always preferable to pass a real function, rather than a string that'll need evaled. Javascript isn't really an object oriented language, it's more an object based and functional hybrid, kinda a cross between lisp and self.

Rick Strahl
March 29, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Thanks all...

The solution is simply not to create a 'property' but to create a variable within the 'class' function scope.

Sys.UI.ToolTip = function(associatedElement)
{
var _controlId = associatedElement.id;

this.function Fire() {
window.setTimeout(this.DoSomeThing,300)
}
this.function DoSomeThing()
{
alert( _controlId );
}
}

Tom McDonald
April 08, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Rick, could you provide your soln w/in the context of working example. I'm having difficulty trying to implement it.

Mayur Hirpara
May 25, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Hi Rick,
I was actually facing the similar trouble and was browsing through the web. Also read through your article and responses. But did not get any clue.
However, Finally I was able to solve my problem. Lets see if it is the same as yours.
Basically we are using ASP.NET 2.0 script callback feature. Now after making the call to server there is a function on the client that will handle the returned results. However, while client callback funciton handles the results, I also wanted to schedule call to other client functions based on which client control started the script-callback originally.
Therefore when I initially make a server call I pass it a client function to be called when it comes back e.g. "myfunction". script-callback function on the client handles the result and retrieves the name of the function from the returned XML results. After this it concatenates the function name with the "(arguments)" so that function call becomes something like "myfunction(arguments)". Now I create a anonymous function wrapping the original function call and assign it to one of the properties of an existing stub function created just for this purpose. Also assign the controlID to be passed to another property of stub function. Now schedule the call to stub funciton using setTimeout. within the stub function you call the its property to which we assigned the anonymous function passing it the value assigned to another property of the same stub function.
This solved my problem.
function myStubFunction()
{
myStubFunction.CallMyFunction(myStubFunction.Param1, myStubFunction.Param2);
}

function ProcessCallBackResult (args, context)
{
//Suppose I retrieve this value from the callback result.
var myCall = "myfunction";
myCall += "(arguments)";
myStubFunction.CallMyFunction = new Function('controlID', 'msg', myCall);
myStubFunction.Param1 = targetControlID;
myStubFunction.Param2 = "This is example of passing multiple arguments";
window.setTimeout("myStubFunction();", 1000);
}

Mayur Hirpara
May 25, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Hi Rick,
Just forgot to mention that in the last code I posted, in my fuinal function i.e. "myfunction" I retrieve the values of controlID or any other parameter using "arguments" array. e.g.
controlID = arguments[0];
msg = arguments[1];
and so on....
Thanks

Michael K. Campbell
June 23, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Rick,

Give my ToolPanel control a look:
http://www.angrypets.com/tools/toolpanel/
(just look at the source on that page). I grab a handle to a div/element in there, and then pass it to a method which is called by setTimeout.

It was a booger to set up, and the end result is that it required the use of 'ticks' inside.

case in point:
var sMsg = "Hello, world";
window.setTimeout("alert(" + sMsg + ")", 1000);

won't work, but
var sMsg = "Hello, world";
window.setTimeout("alert('" + sMsg + "')", 1000);

will work - cuz I've added ticks in there to wrap my text.

sylvinus
June 26, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

you're missing the bind() method from prototype ;)

John
June 27, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

After spending hours on this problem, the solution suggested by "Ramon Leon" works for me.

phroggar
August 01, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

For those wishing a prototype example and who did not REALLY know how to work with "bind" (like me):

var myTimeout=Class.create();
myTimeout.prototype={
initialize:function(message,timeOut){
this.message = message;
this.timerID = window.setTimeout(this.showMessage.bind(this), timeOut);
},
showMessage(){
alert(this.message);
}
}

-
August 10, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?


Yahoo use "apply" in their YUI/connection/connection.js library.

There's also reference to it here:
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Function:apply

Yahoo seem to use it to change scope, but it also allows arguments to be passed to the function.

eg,
window.setTimeout (function () { myObject.myFunction.apply (myObject, [arg1, arg2, arg3]); }, 1000);


And suppose you need/want to "restart" your current function in (say) 1 second...

function doSomething(arg1, arg2)
{
if (!ready)
{
// try back later
var myContext = this;
window.setTimeout (function () { myContext.doSomething.apply (myContext, [arg1, arg2]); }, 1000);
return;
}

// finish the job

}

Rick Strahl
August 10, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Yeah that definitely works. Actually function.call works better in this scenario yet.

The following works to keeps the parameters in context for a function call:

window.setTimeout( function() { Fadeout.call(this, ControlId,HideOnZero,Step,Percent, UseVisibility); },30);

where this is the current call context or function.

I don't quite understand how it works in keeping the context, but it does <g>...

Wing
August 23, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

All of this will work only if you want one instance of the method running at any point in time.
If you want two running at the same, this hasn't worked for me. I'm still working on it and I'll leave a response if I get it working

Wing
August 23, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

What you /can/ do is give each of your objects a unique name.
Then when it comes to generating the string for the call back, you do something like:
window.setTimeout(this.name+".method("+param1+", "+param2+")", 10);

shumisha
August 24, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Hello All,

researching about the same issue, I came accross this 'asynchronous call wrapper'. This should do the trick ? Going to try it right away !

http://devedge-temp.mozilla.org/toolbox/examples/2003/CCallWrapper/index_en.html

shumisha
August 25, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Just an update on the above mentioned CCallwrapper class. It works perfectly ! makes it a snap to setTimeout with methods and parameters !


TM
September 26, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

I'm chiming in a little late, but I just had to comment. It seems that Ramon Leon might be the only one here with a good fundamental understanding of Javascript. I can't think of any other explanation for why everyone seems to be making this so complicated. His solution is simple, concice, and exactly the right way to do this. Why in the world would you need to involve all these 3rd-party libraries and extra code to do something so simple?

Rick Strahl
September 26, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Tm, the reason why all of this is being done is because JavaScript's fucked up OO implementation. I understand why that is - it's a dynamic language after all, but it's an issue you constantly need to be aware of. You can't just create an object and use it you always have to keep function scope in mind and that's only the beginning of where the hacking begins. Using a global reference as Ramon suggests is not always a possibility especially if you want to build reusable code in a library.

The real solution to the problem I brought up here is to use function.apply or function.call to preserve the call context, but this is neither obvious nor intuitive to write. Having to make calls with .apply and .call just to preserve functional state is a pain in the ass and if you come from a background in 'real' OO it smells of procedural programming.

It's taken me a heck of a lot of time to get a basic grasp of some of these concepts - they are not logical and certainly not easy to pick up. For one there are so many different ways that you can 'fake' OO classes and class like behavior all with various differing behaviors for the class implementation. It sucks...

I don't consider myself particularily dense when it comes to different concepts, but this has been one that just goes counter my intuition which makes it difficult at best. I suspect it's the same for many other developers using typed or even more traditional dynamic/interpreted languages.

Matt Irving
September 27, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Sheer genius! I used Ramon Leon's suggestion and it worked flawlessly. Thanks Rick, et al.

Rick Strahl's Web Log
September 28, 2006

# JavaScript and function.call and function.apply for async execution - Rick Strahl's Web Log

Making asynchronous callback functions typically using window.setTimeout in the browser can be tedious code to write if you need to pass parameters. String literals is the most common way to do this but there's an easier way.

P.
October 09, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

SOLUTION:

var _this = this;
this.Timerid = setTimeout(function(){_this.handleError('var in here');},this.httpTimeOut);

DotNetSlackers Latest ASP.NET News
October 16, 2006

# DotNetSlackers: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?


Ping
October 24, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Hi, all. when using settimeout i also had the same problem before. But i used the following delegating when parameters needed.(the solution is not mine.got from web too. really handy):It uses apply function and returns a function pointer.

function delegate_withparameter(object, thatMethod){
if(arguments.length > 2)
{
var _params = [];
for(var i = 2; i <arguments.length; i++){
_params.push(arguments[i]);
}
return thatMethod.apply(object, _params);
}
else
return thatMethod.call(object);
}

so for timer problem:

window.setTimeout( delegate_withparameter(this,this.HideToolTip, controlId),Timeout);

would do..

Rick Strahl
October 24, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Ping, interesting variation on that them - I like that idea, although it's not that much easier to look at and understand than using apply or call directly.

Jocelyn
November 09, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Scope in JavaScript, in particular the use of "this", is making hitting my head against the wall very appealing right now. Just thought you'd like to know this post is timeless and I stumbled upon it via google.

If I had only learned JavaScript before ActionScript, I would be ignorant to the potential for sensible scope.


PS. If, for some reason, you decide to look at my site, please bare in mind it hasn't been updated in 2 years. This fact amuses me, given I'm attempting to write a GUI for firefox/IE at my place of employment and yet... old personal site.

Draxzer
December 11, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

The solution of P. (setting a global var) only works when you have a single instance of that object!

The solution of Rick Strahl (the call method) works, but only when I do NOT put the call statement in an anonymous function like this:

this.oInterval = window.setInterval(this.__interval.call(this), 1000);

Draxzer
December 11, 2006

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Nevermind my comment, it doesn't seem to work afterall.

Morgoth
January 05, 2007

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

var _this = this;
this.Timerid = setTimeout(function(){_this.handleError('var in here');},this.httpTimeOut);

Yes, it works, but memory leaks like hell ;[ Because everytime the line var _this=this; is executed, a new copy of the object is created.
Forexample I want to create an Ajax class that also can repeat requests after some interval:

Ajax.prototype.get = function(method, url, func, id, timer) {
var request = this.createRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200)
switch (method) {
case "text":
func(request.responseText, id);
break;
case "xml":
func(request.responseXML.documentElement);
break;
}
}
request.open("GET", this._rndsid(url), true);
request.send(null);
if (timer) {
var _this = this;
setTimeout(function(){_this.get(method, url, func, id, timer);}, timer);
}


}

... the usage is something like this:
<div id = "d"></div>
....

ajax = new Ajax()
ajax.getFill("rnd.php", "d", 1000);

It sets the innerHTML of the div with id "d" to whatever content rnd.php returned every second. Yes, it works, but it memory leaks ;[ I can't afford that, because after a hour or so the browser will take most of the RAM and even start scratching like hell. How to destroy the "_this" instance after it s used?

Kwasny
January 20, 2007

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

You can pass method with object in scope ang with some arguments like that:
setTimeout(function(){object["method"].apply(object,[arg1,arg2,...])},1000);
function Class()
{
  this.method=method;
}
function method(arg1,arg2){//do sth with args}
object = new Class();

anonymous function with redirection to another function within object scope

vorpal.cc/blog
March 15, 2007

# vorpal.cc/blog &raquo; Javascript Class Event Handlers

David Hogue's thoughts on software development in Bend, Oregon

blog.vorpal.cc
July 22, 2007

# blog.vorpal.cc &raquo; Javascript Class Event Handlers

David Hogue's thoughts on software development in Bend, Oregon

Pete Storey
August 06, 2007

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

I'm not sure how many of you are using just Firefox but we don't seem to have a problem getting things sorted on that, but somehow it just won't work in IE (7 that I'm testing currently).

The passing this as a new variable doesn't work, and nor can I make any odds with the Function.apply method, which in essence still suffers from the same problem.

Has anyone actually got this working on IE?
thanks
Pete

Latch
August 19, 2007

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Try using a closure like this:

window.setTimeout(function() { this.HideToolTip(ControlId) },Timeout);

Eric
January 04, 2008

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

<a href="http://script.aculo.us/">Scriptaculous</a> solves this issue with their bind() function. It forces the "this" inside the method to reference your object rather than the window. The library is a little heafty, but is pretty useful. You may be able to look at what they are going and roll your own if you do not want to reference the whole thing.

Example syntax:

monitorTimeout: function() {
window.setTimeout(this.checkTimeout.bind(this), 60000);
},


Good luck.

Rick Strahl
January 04, 2008

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Eric - yeah, most JavaScript libraries pretty much do this. But you can do this natively too by using apply or call, which both force the call context to the specified object. I believe that's pretty much the same behavior as .bind() you describe above.

The big problem with this approach is that you have to remember each time you call a method this way to do it with the right syntax, otherwise that code is bypassed.

FWIW, I'm still to date using a var _I (for Instance) in classes and reference the _I instead of this in code. That always works with no further configuration - it's just remembering to use _I instead of this <shrug>...

Ketan
March 06, 2008

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Great post. Solved my problem

Shiplu
September 01, 2008

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Thanks for the tricks.
The closure things helped me a lot.

coolpositive
January 08, 2009

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Great tip!! I’ve been looking for this solution for a while now. Thanks!

Ihor
February 10, 2009

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Solution:

this.param1 = "";
this.methodToCall = function() {
alert(this.param1);
}

this.method = function() {
setTimeout(
function(thisObj) { thisObj.methodToCall(); },
this.time,
this);
}

_michael
August 17, 2009

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Here's another way to solve the problem, equivalent to .call().

(1) The 'intended' method call (doesn't work):
setTimeout( this.HideToolTip, Timeout, ControlId );

(2) Using call(), as above:
var myContext = this;
setTimeout ( function () { myContext.HideToolTip.call( myContext, ControlId ); }, Timeout );

(3) Using nested functions: 
setTimeout( ( function ( obj, param ) { return function () { obj.HideToolTip( param ); }; } )( this, ControlId ), Timeout );

It does just the same thing: currying the parameter value and the object into the scope.

* First, an inner function is created, calling obj.HideTooltip( param ) - whatever obj and param might be at that point.

* Next, an outer function is set up which allows you to specify obj and param. It returns the inner function with obj and param fixed. That's the whole point: obj and param will become part of the function's call stack as soon as the outer function is called. Afterwards, they will stay the same even if the scope has changed.

* Last step: The outer function *is* called, with 'this' and controlId as parameters. It manufactures a function where obj and param are frozen to their current values, and returns that function. You can call the result anytime and in any context, and it will do the right thing. E.g., you can pass it to setTimeout, which will execute it in the global context.

Using nested functions may look more complicated than call(), but perhaps it can help to make the process involved a little clearer.

Martijn
December 03, 2009

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

I solved the problem of passing in a parameter in the window.setTimeout in the following way.

function DoSomething(myValue) {
    var callbackFunction = function() {
        // do stuff with the myValue parameter 
        alert(myValue);
    }
 
    // Execute the function with time-out
    window.setTimeout(callbackFunction, 1000);
}


For example to show a message with a delay:

 DoSomething("Hello World");

Hans
July 09, 2010

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Great! "callback" is the easiest and the best.

Thanks,
Hans

Craig's Blog
September 30, 2010

# links for 2010-09-30

JavaScript window.SetTimeout to a JavaScript Class method or function with parameters? - Rick Strahl's

Andre
March 10, 2011

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Heres how i do this in my singleton class

I am both calling the settimeout method from within my class, assigning the id to a class parameter and passing the current call object through to the target class method, setting my delay from a class global delay variable.

Like so

Inside my input handler (this is fired from keyup, keydown, paste and various other change events on the page)
//here is my class method thats pointed to by various bound methods
this.qchng = function (e) {
   //assign my class wide Timer id "MS.sTid" to the new timer im creating
   //passing the object "e" through to class method I want to call "MS.aChange(e)" 
   //once the given delay has elapsed "MS.gw"
   MS.sTid = window.setTimeout(function () { MS.aChange(e); }, MS.gw);
};


Hope this helps those that might have been struggling with this.

Best Regards
Andre

Jos Visser
May 24, 2011

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

I found this thread and took the many solutions into a little Timer class.

function Timer(callback, milliseconds, context)
{
    this.milliseconds = milliseconds;
    this.callback = callback;
    this.context = context;
    if (!this.context) this.context = this;
    this.handle = null;
}
 
Timer.prototype.start = function()
{
    var timer = this;
    var context = this.context;
    var timeUp = function()
    {
        timer.callback(context);
    }
    this.handle = setTimeout(timeUp, this.interval);
}
 
Timer.prototype.stop = function()
{
    clearTimeout(this.handle);
}

Then, in a class of your choice, you can instantiate the timer, passing *this* as the context. The callback function will get a context parameter that is actually the object passed to the timer.

If you don't pass an object, the context will be the timer itself, so a different approach would be to not pass *this*. Set whatever data needed into the timer, and retreive that data through the context parameter of the handler, which will set to the timer at that time.

I think the first approach is more transparent:
MyObject.prototype.timeUp = function(context)
{
    alert(context.whateverProperty);
}
 
MyObject.prototype.startRunning = function()
{
    // Pass ourselves as the context of the timer.
    this.timer = new Timer(this.timeUp, 2000, this);
    this.whateverProperty = 'Test';
    // Start the timer.
    this.timer.start();
}


You can ofcourse choose to start the timer directly from the constructor, but I figured it could be handy to be able to start later (especially if you choose the second approach and need to set properties to the timer too).

Jos Visser
May 24, 2011

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

I made an error in the post.
this.handle = setTimeout(timeUp, this.interval);

should ofcourse be
this.handle = setTimeout(timeUp, this.milliseconds);


I decided to rename interval to milliseconds, but forgot to alter this line.

Christian
August 30, 2011

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Just for the note:
Since firefox has some strange reaction sometimes you try to focus() on a text field, setTimeout might come in very handy:
var SingletonObj = {
    refocus: function(htmlref) { 
        window.setTimeout(function() {htmlref.focus();},5);
    }
};

Michael 'spockmonster' Rains
December 19, 2011

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Hi,

First off all, I am happy to post a solution to Rick's blog which has helped me a few times now, since 2007. Thanks Rick!

My solution is simple and doesn't risk any race conditions by setting global data, etc.

The general problem is we have two methods, and the first once the second to be invoked after a timeout and with the control that is in-context passed as a parameter.
function FirstFunction() {
    .. do some stuff
    window.setTimeout("SecondFunction('" + $(this).attr('id') + "')", 50);
}
 
 
function SecondFunction(targetId) {
    $('#'+target).css('background','#f00');  //set background red
    var x =  document.getElementById(target)
    //do something with x
}


The key to this is how the call to SecondFunction is created. Notice that the whole function invoke is a string-literal. with single-quotes embedded just inside the parenthesis and surrounding the parameter's literal value. So it is a string-literal embedded inside of a string-literal! By way of example, if FirstFunction's in-context control has an id of "OfficerRank" then the line ends up looking like this:
    window.setTimeout("SecondFunction('OfficerRank')", 50);  //50 ms timeout

This has worked for me reliably in IE8, IE9, FireFox 8, Opera, Safari and Chrome.

Live Long and Prosper

js
February 06, 2012

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

Finally got it ;)
Took some time to understand Jos Vissers comment, but finally, it's as easy as
    var ref = this;
    setInterval(function(){
            ref.loop();
        }, 200);

Thank you all!

Ravi
February 28, 2012

# re: JavaScript window.SetTimeout to a JavaScript Class method or function with parameters?

@ Jeff Lewis - Thanks , for your reply on March 28, 2006 @ 6:57 pm ,
your code snippet helped me a lot.

West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2024