为会话超时的JavaScript倒计时 [英] javascript countdown timer for session timeout

问题描述

我要提醒会话超时即将到期的用户。我想有与OK按钮弹出并显示秒钟滴答下来的弹出窗口。我能做到这一点只用Java脚本？
即时通讯使用C＃code的后面还行。

现在它检测到的会话超时和弹出告诉他们会话已过期。

 ＆LT;脚本类型=文/ JavaScript的＆GT;变种sessionTimeout =下;％=查看Session.Timeout％gt;中;功能DisplaySessionTimeout（）{sessionTimeout = sessionTimeout  -  1;如果（sessionTimeout＆GT; = 0）  window.setTimeout（DisplaySessionTimeout（），60000）;其他
{
警报（当前会话结束由于不活动。）;
}
}
＆LT; / SCRIPT＆GT;
 

解决方案

是的，你可以通过JavaScript做到这一点。下面是从这个灵感计算器回答我发现了一个简单的计数器实现而回：

 功能计数器（选项）{
    VAR定时器;
    VAR例如=这一点;
    VAR秒= options.seconds || 10;
    VAR onUpdateStatus = options.onUpdateStatus ||功能（）{};
    VAR onCounterEnd = options.onCounterEnd ||功能（）{};
    VAR onCounterStart = options.onCounterStart ||功能（）{};    功能decrementCounter（）{
        onUpdateStatus（秒）;
        如果（秒=== 0）{
            stopCounter（）;
            onCounterEnd（）;
            返回;
        }
        秒 - ;
    };    功能startCounter（）{
        onCounterStart（）;
        clearInterval（定时器）;
        定时器= 0;
        decrementCounter（）;
        定时器=的setInterval（decrementCounter，1000）;
    };    功能stopCounter（）{
        clearInterval（定时器）;
    };    返回{
        启动：功能（）{
            startCounter（）;
        }，
        停止：功能（）{
            stopCounter（）;
        }
    }
};
 

...以及如何使用它的一个例子：

  VAR倒计时=新的计数器（{
    //秒数倒计时
    秒：3，    onCounterStart：功能（）{
        //显示弹出一条消息
        ...
    }，    //为每个第二个回调函数
    onUpdateStatus：功能（秒）{
        //改变显示的剩余秒的超时UI
        ...
    }，    //倒计时后的最终行动的回调函数
    onCounterEnd：功能（）{
        //显示消息，会议结束，也许重定向或注销
        ...
    }
}）;
countdown.start（）;
 

一旦服务器已准备好以提醒用户，只需要创建一个定时器，它会开始倒计时。您可以自定义每个事件发生的事情：当定时器开始，当第二个由蜱，当倒计时完成

I want to alert the user that the session timeout is about to expire. I want to have a popup with an OK button and show the seconds ticking down on the popup. Can i do this with just java script? Im OK with using C# code behind also.

Right now it detects session timeout and pops up telling them the session has expired.

<script type="text/javascript">

var sessionTimeout = "<%= Session.Timeout %>";

function DisplaySessionTimeout() {

sessionTimeout = sessionTimeout - 1;

if (sessionTimeout >= 0)

  window.setTimeout("DisplaySessionTimeout()", 60000);

else
{
alert("Your current Session is over due to inactivity.");
}
}


</script>

解决方案

Yes, you can do this via JavaScript. Here's a simple counter implementation that was inspired from this StackOverflow answer I found a while back:

function Counter(options) {
    var timer;
    var instance = this;
    var seconds = options.seconds || 10;
    var onUpdateStatus = options.onUpdateStatus || function() {};
    var onCounterEnd = options.onCounterEnd || function() {};
    var onCounterStart = options.onCounterStart || function() {};

    function decrementCounter() {
        onUpdateStatus(seconds);
        if (seconds === 0) {
            stopCounter();
            onCounterEnd();
            return;
        }
        seconds--;
    };

    function startCounter() {
        onCounterStart();
        clearInterval(timer);
        timer = 0;
        decrementCounter();
        timer = setInterval(decrementCounter, 1000);
    };

    function stopCounter() {
        clearInterval(timer);
    };

    return {
        start : function() {
            startCounter();
        },
        stop : function() {
            stopCounter();
        }
    }
};

... and an example of how to use it:

var countdown = new Counter({
    // number of seconds to count down
    seconds: 3,

    onCounterStart: function () { 
        // show pop up with a message 
        ... 
    },

    // callback function for each second
    onUpdateStatus: function(second) {
        // change the UI that displays the seconds remaining in the timeout 
        ... 
    },

    // callback function for final action after countdown
    onCounterEnd: function() {
        // show message that session is over, perhaps redirect or log out 
        ... 
    }
});
countdown.start();

Once the server is ready to alert the user, just create the timer and it'll start counting down. You can customize what happens on each event: when timer starts, when a second ticks by, and when the countdown is done.

这篇关于为会话超时的JavaScript倒计时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！