Passing a function as an argument in Javascript

Question

I'm really struggling with this one - sure I'm missing something simple.

Here's the code :-

function webcamupdate(webcamurl) {
    alert("I am a function to update the webcam with the url "+webcamurl);
}

function countdown(callback) {
    alert(callback);
    setTimeout("callback()", 10000);
}

var theurl = "THIS IS THE URL";

countdown(function(){ webcamupdate(theurl); });

As you can see, I'm trying to contsruct a countdown function (there is more code, however I have just posted the basics) which will run a function (in this case updating a webcam) after 10 seconds.

All works OK if the function has no arguments, however the alert(callback) in the coundown function returns the following :-

function(){ webcamupdate(theurl); }

This of course crashes the script when the webcamupdate function runs as "webcamurl" is not defined.

What alert(callback) actually needs to say is :-

function(){ webcamupdate("THIS IS THE URL"); }

i.e. it evaluates the argument "theurl" BEFORE passing it with the function.

Any ideas would be much appreciated

EDIT

I think I've perhaps misled you my using the alert rather than a function (I was just trying to keep it simple!)

Here's the original code (still cut down, but gives you a better idea).

function webcamupdate(url) {
    document.getElementById("cruisecam").src=url+"&rand="+Math.random();
    countdown(30,"Webcam",function(){ webcamupdate(url); });
}

function countdown(currentcount,displayelement,callback) {
    var displaytext;
    if (currentcount == 0 ) displaytext = displayelement+" is refreshing now";
    else displaytext = displayelement+" updating in "+currentcount+" seconds";
    if (trackingcountdown.hasChildNodes()) clearelement("trackingcountdown");
    trackingcountdown.appendChild(document.createTextNode(displaytext));
    if (currentcount == 0) {
        countdown(currentcount,displayelement,callback)
    }
    else {
        currentcount--;
        var countdownparameters=currentcount+',"'+displayelement+'",'+callback;
        setTimeout("countdown("+countdownparameters+")", 1000);
    }
}

//The function is called on window loading with
//countdown(30,"Webcam",function(){ webcamupdate(url); });

//clearelement is another function (not listed) that clears the node.

Basically, it's the countdown function that matters - it takes 3 arguments - the countdown time in seconds, the DOM element to display the countdown, and the function to run on timeout.

If the 3rd argument (the function) doesn't have any arguments of its own - e.g. webcam() - it works fine, however when we trying adding webcam("webcampic.jpg") it doesn't work due to the function trying to run webcam(url) rather than webcam("webcampic.jpg").

Obviously the easiest solution is just to make the url a global variable, but this is not good practice and would stop me using the countdown code on other pages through a js file. help!

"What alert(callback) actually needs to say..." That's not how JavaScript works. — zzzzBov
– zzzzBov, Commented Nov 11, 2011 at 16:40

Abdul Munim · Accepted Answer · 2011-11-11 16:42:13Z

3

Just changing from callback() to passing the function reference would do it.

function webcamupdate(webcamurl) {
    alert("I am a function to update the webcam with the url "+webcamurl);
}

function countdown(callback) {
    alert(callback);
    setTimeout(callback, 10000);
}

var theurl = "THIS IS THE URL";

countdown(function(){ webcamupdate(theurl); });

answered Nov 11, 2011 at 16:42

Abdul Munim

19.2k8 gold badges54 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

btleffler · Accepted Answer · 2011-11-11 17:21:25Z

0

var theURL = "THIS IS THE URL";

function webCamUrlUpdate( url ) {
    alert( "I am a function to update the webcam with the url " + url );
}

function countDown( callback ) {
    setTimeout( callback, 10000 );
    alert( callback );
}

countDown(function () {
    /* IMPORTANT: need to return that other function */
    return webCamUrlUpdate( theURL );
});

You would actually want to return the function so that setTimeout( callback, 10000 ); behaves as expected. When you alert a function in Javascript, it's the same as alert(callback.toString()) to get the full string version of the function header and body.

http://jsfiddle.net/btleffler/xJ5uw/

Interestingly enough, if you alert the callback before the setTimeout(), it doesn't seem like the callback ever fires. If you comment out the first alert, or alert after you set the timeout, it works just fine. I've only tested it in Chrome, so I have to do some more research I suppose.

Either way, you can't have javascript parse (or handle or whatever) the parameter of the function before the function is actually called. You could just have the anonymous callback in countDown() alert the url by itself though.

edited Nov 11, 2011 at 17:21

answered Nov 11, 2011 at 17:04

btleffler

9927 silver badges13 bronze badges

1 Comment

Clive Over a year ago

Thanks guys - I'll take a look at it over the weekend. I think however that I may have over simplified the example & misled you - I'll see if a can add a little more of my code to explain further.

Marc Climent · Accepted Answer · 2011-11-21 10:09:58Z

0

Ok folks -I've finally solved it myself-, here's the solution for others.

Firstly create a function that returns a function:

function createfunctionwebcamupdate(url) {
    return function(){ webcamupdate(url); };
}

Then set a variable to fire the function when it is called:

webcamupdatefunction = createfunctionwebcamupdate(url);

Then refer to this new variable as the callback function:

function(){ webcamupdatefunction(); }

Javascript apparently remembers the variable stored in the createfunction part when the variable is called.

Hope this helps.

edited Nov 21, 2011 at 10:09

Marc Climent

9,4942 gold badges52 silver badges56 bronze badges

answered Nov 21, 2011 at 9:51

Clive

411 silver badge5 bronze badges

Collectives™ on Stack Overflow

Passing a function as an argument in Javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related