Javascript闭包函数不返回正确的值

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?

Answer 1

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. :-).)

Answer 2

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.