Javascript closure function doesn't return the right value

Question

I have a problem with my Javascript code and don't know why it doesn't run.

This is my timer:

var time = 0;
startTimer();

function startTimer(){
    setInterval(function(){
    time=time+1;
    },10);
}

This code here works (I run timeoutTester() while clicking on a button, then it alerts and shows me the time difference):

function timeoutTester(){
    var snap_time1 = time;
    setTimeout(function(){
        var snap_time2 = time;
        var diff = snap_time2-snap_time1;
        alert(diff);            //works: ~100 everytime...
    },1000);
}

But this code here doesn't work (I run testTimer() by clicking on a button):

function timeoutTester(){
    var snap_time1 = time;
    var result;
    setTimeout(function(){
        var snap_time2 = time;
        result = snap_time2-snap_time1;
    },1000);
    alert(result); //doesn't work! It always shows me: "undefined"
    return result;
}

function testTimer(){
    var counter = 0;
    setInterval(function(){
        counter = counter + 1;
        alert(counter);         //works: 1,2,3,....
        var result = timeoutTester();
        alert(result);  //doesn't work! It always shows me: "undefined"
    }, 3000);
}

Do you know where the problem might be? (No error while debugging in browser!)

UPDATE:

I learned that alert(result); is executed immediately, while result has no value yet.

But since I'm calling timeoutTester() from the outside, I still need a return value from this function!

Any ideas?

The most asked question of the year this must be. Look for "async variable javascript" in Stack Overflow see if you find something. — elclanrs
– elclanrs, Commented Jan 31, 2013 at 21:44
@elclanrs: Thanks for the hint, but I still have now idea how to solve this issue...so I changed the question a little. — Silvan
– Silvan, Commented Jan 31, 2013 at 22:04

Ted Hopp · Accepted Answer · 2013-01-31 21:50:13Z

4

In your last example (the one that doesn't work), calling setTimeout(function()...) does not execute the function immediately, but does return immediately. When it returns, result is still undefined because the function has not yet executed.

By the same token, the previous example (that has the call to alert() inside the timeout function) works because the call to alert() happens after result is assigned a value.

If for whatever reason you don't want to call alert() directly from within the timeout function, you could rewrite the last example as:

function timeoutTester(){
    var snap_time1 = time;
    setTimeout(function(){
        var snap_time2 = time;
        alertResult(snap_time2-snap_time1);
    },1000);
}
function alertResult(result) {
    alert(result);
}

(By the way, the call startTimer(1000000000000); looked scary until I realized that the argument was being ignored. :-).)

edited Jan 31, 2013 at 21:50

answered Jan 31, 2013 at 21:45

Ted Hopp

235k48 gold badges412 silver badges533 bronze badges

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

1 Comment

Silvan Over a year ago

But is it possible to call the function from the outside and get a return value?

Marcus · Accepted Answer · 2013-01-31 22:57:21Z

1

To get this done, you need to use a global:

var timeoutTesterResult;

function timeoutTester(){
    var snap_time1 = time;
    var result;
    setTimeout(function(){
        var snap_time2 = time;
        timeoutTesterResult = snap_time2-snap_time1;
        alert(timeoutTesterResult);                    //works: ~100
    },1000);
}

And a second timeout who gets this global only after it's set/changed:

function testTimer(){
    var counter = 0;
    setInterval(function(){
        counter = counter + 1;
        alert(counter);         //works: 1,2,3,....
        timeoutTester();
        setTimeout("alert(timeoutTesterResult)",1000); //works: ~100
    }, 3000);
}

That's the "via global"-solution.

answered Jan 31, 2013 at 22:57

Marcus

1,2422 gold badges14 silver badges23 bronze badges

Collectives™ on Stack Overflow

Javascript closure function doesn't return the right value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related