带有jquery对话框的javascript中的会话超时警告答案

【问题标题】：session time out warning in javascript with jquery dialog带有jquery对话框的javascript中的会话超时警告
【发布时间】：2015-07-24 11:28:00
【问题描述】：

我正在尝试实现一个 javascript 会话超时弹出窗口。请帮我。我可以第一次显示弹出窗口，但是当我单击确定时，下一次弹出窗口将在下一分钟出现。为了测试，我给了 3 分钟的时间。请帮我解决这个问题。我无法在鼠标点击时重置计时器。

</head>
<body>
<div id="dialog" style="display:none;" title="Dialog Title">Your session is going to expire in 10min</div>
<script>
var lefttime=4;
var interval;
setTimeout( 'ShowTimeoutWarning();', 180000 );


function ShowTimeoutWarning()
{

$( "#dialog" ).dialog( "open" );
return false;

}

$("#dialog").dialog({
autoOpen: false,
dialogClass: "no-close",
position: 'center' ,
title: 'session',
draggable: false,
width : 300,
height : 200,
resizable : false,
modal : true,
buttons: [
    {
      text: "OK",
      click: function() {
        ShowTimeoutWarning();
        $( this ).dialog( "close" );
     
      }
    }
  ]
});

document.onkeyup=setTimeout( 'ShowTimeoutWarning();', 180000 );
document.onkeydown=setTimeout( 'ShowTimeoutWarning();', 180000 );
document.click=setTimeout

</script>

【问题讨论】：

你能给我们看一些代码、html和javascript吗？

标签： javascript jquery jquery-ui timeout session-timeout

【解决方案1】：

你的意思是这样的吗？

您需要为 setTimeout 返回值设置一个变量，以便在设置另一个超时之前清除该超时。

Javascript

var timeoutID;
resetTimeout();

function resetTimeout(){
    if( timeoutID ) clearTimeout( timeoutID );
    timeoutID = setTimeout( ShowTimeoutWarning, 180000 );
}


function ShowTimeoutWarning() {
    $( "#dialog" ).dialog( "open" );
    return false;
}


$("#dialog").dialog({
    autoOpen: false,
    dialogClass: "no-close",
    position: 'center' ,
    title: 'session',
    draggable: false,
    width : 300,
    height : 200,
    resizable : false,
    modal : true,
    buttons: [{
        text: "OK",
        click: function() {
            ShowTimeoutWarning();
            $( this ).dialog( "close" ); 
        }
    }]
});

document.onkeyup   = resetTimeout;
document.onkeydown = resetTimeout;
document.onclick   = resetTimeout;

【讨论】：

感谢汤姆的回答。这段代码会重置计时器吗？ document.onkeyup = 重置超时； document.onkeydown = 重置超时； document.click = resetTimeout;
是的，它会的——虽然我只是稍微更新了一下，你需要onclick而不是click。不过现在应该可以了。我还刚刚将resetTimeout() 调用添加到代码的开头。没有它，在触发键盘/鼠标事件之前它不会被设置。
对不起，它不起作用。我什至一次都看不到弹出窗口
你确定吗？我已经检查了 jsfiddle 上的代码，它似乎对我有用。您是否看到我的编辑之前的评论指出我更新了代码以在脚本顶部调用resetTimeout();？没有它，它不会做很多事情。
这是一个简化的 jsfiddle (jsfiddle.net/p754n85t/1)，它使用警报而不是超时 5 秒的对话脚本。

【解决方案2】：

请在下面找到代码。时间设置为 1 分钟。在 55 秒弹出消息到来之前

已邮寄：

    if (!this.IsPostBack)
    {
            Session["Reset"] = true;
            Configuration config =WebConfigurationManager.    OpenWebConfiguration("~/Web.Config");
            SessionStateSection section =(SessionStateSection) config.GetSection("system.web/sessionState");

            int timeout = (int)section.Timeout.TotalMinutes * 1000 * 60;
            Page.ClientScript.RegisterStartupScript(this.GetType(), "onLoad", "DisplaySessionTimeout(" + timeout + ")", true);             
        }

Jquery 和弹出消息：

 <div id="ExpireConfirm_Submit">
<table>
    <tr>
        <td style="width: 230px;">
            Your Session will expire in <span id="seconds"></span>&nbsp;seconds.<br />Do you
            want to logout?
        </td>
    </tr>
</table>

<script type="text/javascript">
 var sessionTimeout = "<%= Session.Timeout %>";
 function DisplaySessionTimeout(timeout) {
    var seconds = timeout / 1000;
    document.getElementsByName("seconds").innerHTML = seconds;
    setInterval(function () {
        seconds--;
        document.getElementById("seconds").innerHTML = seconds;
    }, 1000);
    setTimeout(function () {
        //Show Popup before 20 seconds of timeout.
        $("#ExpireConfirm_Submit").dialog({
            height: 200,
            width: 400,
            resizable: false,                
            modal: true,                
            title: "Session Expire Confirmation",                              
            open: function () {
                $('p#id1').html(sessionTimeout);
            },
            buttons: {
                "Yes": function () {                        
                    $(location).attr("href", "/Account/Logout").submit();
                    $(this).dialog("close");
                },
                "No": function () {                        
                    ResetSession();
                    $(this).dialog("close");
                }
            }
        }).prev(".ui-dialog-titlebar").css("background", "red");
    }, timeout - 55 * 1000);
    setTimeout(function () {
        $(location).attr("href", "/Account/Logout").submit();
    }, timeout);
};
function ResetSession() {
    window.location = window.location.href;
}    
</script>

这是在会话超时之前显示弹出警告的最佳示例

【讨论】：

【解决方案3】：

你应该试试这个

<script>
$(document).ready(function () {

                var time = 30 * 1000 * 60; //session timeout 30 min
                var timeout;
                var isLogout = false;

                timeout = setTimeout(function() {
                    //Things you need to do
                        isLogout = true;

                }, time);

                $(document).on('click', function () {
                    if (!isLogout) {
                        clearTimeout(timeout);
                        timeout = setTimeout(function() {
                            //Things you need to do
                             isLogout = true;
                        }, time);
                    }
                });
            });
</script>

【讨论】：