javascript clearTimeout not clearing timeout!.. this shouldn't be hard?

Question

I'm working on a auto logout using setTimeout and clearTimeout. Should be really straight forward but the clear timeout doesn't seem to stop the timeout and the function is called anyway. I have it set up that the session variable populates a text input that the javascript then reads and compares to the time now. if the difference is more than or equal to 20 seconds an overlay div shows giving an option to renew the session or it will logout in 10 seconds. The script that check the last activity auto runs every ten seconds. Obviously once I've got it working the timings will be longer - these are just for testing purposes.

I have trawled the web but can't seem to find an obvious solution as it not so complicated and looks like it really should just work!

Here's my code:

var t = 0;
function check_status(){
    var time_now = Math.floor(new Date().getTime() / 1000);
    var last_activity = document.getElementById("last_activity").value;
    var since_last_activity = time_now-last_activity;
    console.info(since_last_activity);

    if(since_last_activity >= 20){
        // show div
        document.getElementById("logout_warning").style.height = document.documentElement.clientHeight+"px";
        document.getElementById("logout_warning").style.display = 'block';

        // start countdown
        var t = setTimeout("logout();", 10000);
    }
}

function logout(){
    document.getElementById("logout_warning").style.display = 'none';
    location.href="/user/logout";
}

function renew(){
    clearTimeout(t);

    var time_now = Math.floor(new Date().getTime() / 1000);
    document.getElementById("last_activity").value = time_now;
    document.getElementById("logout_warning").style.display = 'none';
}

setInterval('check_status()', 10000);

and then in the body...

<div id="logout_warning" style="display:none; width:100%; height:500px; top:0px; left:0px; position:absolute; background-image:url('/images/overlay.png'); z-index:100000;">
    <div style="width:300px; position:relative; margin:200px auto; border:1px solid #000000; background-color:#FFFFFF; padding:10px; text-align:center;">
        You're going to be logged out in 10 seconds! oh no!<br/><br/>
        <button type="button" onclick="renew();">Click here</button> to renew your session
    </div>
</div>

The last activity variable is pulled from a text input that is populated by a session variable. This bit seems to work, as in when you click the renew button the value of the input is changed and the console output shows that the time since last activity has been reset.

I hope this makes sense. Please ask for clarification but I'm really stumped on this one!

Thanks!

Answer 1

You have two ts.

var t = 0;

This one in the outside scope.

var t = setTimeout("logout();", 10000);

This one in the inside scope.

clearTimeout(t);

This is reading the one on the outside scope.

Remove the var from the one on the inside scope.