Javascript setTimeout quirk？

Question

我正在尝试实现客户端自动注销功能。我们的想法是，在会话到期前30秒，您会收到一条警告，告知您可以延长会话时间。一切都很好，除了......

我在setTimeout函数中使用两个$(document).ready调用来设置警告超时并设置注销超时。但疯狂的是我设置超时的顺序很重要！如果我先设置注销计时器，则只会触发警告计时器。如果我先设置警告计时器然后再设置注销计时器，那么它们都会触发。

这适用于两个计时器：

$(document).ready(function () {
    var isAuthenticated = <%= HttpContext.Current.Request.IsAuthenticated.ToString.ToLower() %>;
    if(isAuthenticated)
    {
        warningTimer = setTimeout('warnUserOfSessionTimeout()', intWarningMS);
        logoutTimer = setTimeout('logoutSession()', intTimeoutMS);
    }
});

这仅适用于警告计时器：

$(document).ready(function () {
    var isAuthenticated = <%= HttpContext.Current.Request.IsAuthenticated.ToString.ToLower() %>;
    if(isAuthenticated)
    {
        logoutTimer = setTimeout('logoutSession()', intTimeoutMS);
        warningTimer = setTimeout('warnUserOfSessionTimeout()', intWarningMS);
    }
});

以下是完整代码：

<script type="text/javascript">

    var intTimeoutMS = <%= FormsAuthTimeoutMinutes %> * 60 * 1000;
    var intCountDownSecs = 30;
    var intWarningMS = intTimeoutMS - intCountDownSecs * 1000;
    var logoutURL = "<%= Page.ResolveClientUrl("~/Logout.aspx") %>";
    var keepAliveURL = "<%= Page.ResolveClientUrl("~/KeepAlive.aspx") %>"
    var logoutTimer;
    var warningTimer;
    var countDownClockTimer;
    var intClockSeconds = intCountDownSecs;

    function logoutSession() {
        window.location = logoutURL;
    }

    function warnUserOfSessionTimeout() {
        $("#sessionTimeout").dialog({
            title: 'Are you still there?',
            autoOpen: false,
            width: 400,
            modal: true,
            closeOnEscape: false,
            resizable:false,
            draggable:false,
            show: { effect: "slide", direction: "up", duration: 400 },
            hide: { effect: "slide", direction: "up", duration: 500 },
            buttons: {
                "Keep Working": function () {

                    // Keep session alive on server
                    $.ajax({
                        type: "POST",
                        url: keepAliveURL,
                        cache: false
                    });

                    // Clear and reset timers
                    clearTimeout(logoutTimer);
                    clearTimeout(warningTimer);
                    clearInterval(countDownClockTimer);
                    logoutTimer = setTimeout('logoutSession()', intTimeoutMS);
                    warningTimer = setTimeout('warnUserOfSessionTimeout()', intWarningMS);

                    $("#sessionTimeout").dialog("close");
                }
            }
        }).dialog("open");

        // Reset and animate display clock
        intClockSeconds = intCountDownSecs;
        animateCountdownClock();
        countDownClockTimer = setInterval('animateCountdownClock()', 1000);
    }

    function animateCountdownClock() {


        var sec_num = parseInt(intClockSeconds, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if (hours   < 10) {hours   = "0" + hours;}
        if (minutes < 10) {minutes = "0" + minutes;}
        if (seconds < 10) {seconds = "0" + seconds;}

        $('#countDown').text(minutes + ':' + seconds);

        if(intClockSeconds > 0)
        {
            intClockSeconds -= 1;
        }
    }

    $(document).ready(function () {
        var isAuthenticated = <%= HttpContext.Current.Request.IsAuthenticated.ToString.ToLower() %>;
        if(isAuthenticated)
        {
            logoutTimer = setTimeout(logoutSession, intTimeoutMS);
            warningTimer = setTimeout(warnUserOfSessionTimeout, intWarningMS);
        }
    });
</script>

<div id="sessionTimeout" style="display: none; z-index: 1001;">
    <p style="font-size: 13px;">
        It appears that your computer has been left unattended. As a security precaution,
        you are about to be automatically logged out.
        <br />
        <br />
        Do you want to keep working?
        <br />
        <br />
        <strong>Time remaining:&nbsp;<span id="countDown"></span></strong>
        <br />
    </p>
</div>