嗨朋友们，我有jquery注销功能脚本，当我们点击是，保持登录按钮保持页面时脚本第一次工作。我们需要在10秒后再次工作该功能完成注销。请帮帮我恶魔。关于解决这个问题的任何想法都是简单的注销函数脚本
String.prototype.format = function() {
var s = this,
i = arguments.length;
while (i--) {
s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
}
return s;
};
!function($) {
$.timeoutDialog = function(options) {
var settings = {
timeout: 1200,
countdown: 60,
title : 'Your session is about to expire!',
message : 'You will be logged out in {0} seconds.',
question: 'Do you want to stay signed in?',
keep_alive_button_text: 'Yes, Keep me signed in',
sign_out_button_text: 'No, Sign me out',
keep_alive_url: '/keep-alive',
logout_url: null,
logout_redirect_url: '/',
restart_on_yes: true,
dialog_width: 350
}
$.extend(settings, options);
var TimeoutDialog = {
init: function () {
this.setupDialogTimer();
},
setupDialogTimer: function() {
var self = this;
window.setTimeout(function() {
self.setupDialog();
}, (settings.timeout - settings.countdown) * 1000);
},
setupDialog: function() {
var self = this;
self.destroyDialog();
$('<div id="timeout-dialog">' +
'<p id="timeout-message">' + settings.message.format('<span id="timeout-countdown">' + settings.countdown + '</span>') + '</p>' +
'<p id="timeout-question">' + settings.question + '</p>' +
'</div>')
.appendTo('body')
.dialog({
modal: true,
width: settings.dialog_width,
minHeight: 'auto',
zIndex: 10000,
closeOnEscape: false,
draggable: false,
resizable: false,
dialogClass: 'timeout-dialog',
title: settings.title,
buttons : {
'keep-alive-button' : {
text: settings.keep_alive_button_text,
id: "timeout-keep-signin-btn",
click: function() {
self.keepAlive();
}
},
'sign-out-button' : {
text: settings.sign_out_button_text,
id: "timeout-sign-out-button",
click: function() {
self.signOut(true);
}
}
}
});
self.startCountdown();
},
destroyDialog: function() {
if ($("#timeout-dialog").length) {
$(this).dialog("close");
$('#timeout-dialog').remove();
}
},
startCountdown: function() {
var self = this,
counter = settings.countdown;
this.countdown = window.setInterval(function() {
counter -= 1;
$("#timeout-countdown").html(counter);
if (counter <= 0) {
window.clearInterval(self.countdown);
self.signOut(false);
}
}, 1000);
},
keepAlive: function() {
var self = this;
this.destroyDialog();
window.clearInterval(this.countdown);
$.get(settings.keep_alive_url, function(data) {
if (data == "OK") {
if (settings.restart_on_yes) {
self.setupDialogTimer();
}
}
else {
self.signOut(false);
}
});
},
signOut: function(is_forced) {
var self = this;
this.destroyDialog();
if (settings.logout_url != null) {
$.post(settings.logout_url, function(data){
self.redirectLogout(is_forced);
});
}
else {
self.redirectLogout(is_forced);
}
},
redirectLogout: function(is_forced){
var target = settings.logout_redirect_url + '?next=' + encodeURIComponent(window.location.pathname + window.location.search);
if (!is_forced)
target += '&timeout=t';
window.location = target;
}
};
TimeoutDialog.init();
};
}(window.jQuery);/* Some default button styles */
button {font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;}
button {line-height: normal; *overflow: visible;}
button {cursor: pointer; -webkit-appearance: button;}
button {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #cccccc;
border-width: 1px;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 1px 1px rgba(0, 0, 0, 0.1);
cursor: pointer;
color: #333333;
display: inline-block;
font-size: 14px;
line-height: normal;
padding: 5px 10px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
.button:hover, button:hover {
text-decoration: none;
background-position: 0 -15px;
}
.button:focus, button:focus {
-webkit-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0px 2px rgba(0, 0, 0, 0.4);
box-shadow: 0 0px 2px rgba(0, 0, 0, 0.4);
outline: none;
}
/* Timeout Dialog Styles */
.timeout-dialog {
padding: 15px;
position: absolute;
background: #eeeeee url("../imgs/timeout-icon.png") no-repeat 15px 25px;
border: 1px solid #ffffff;
-webkit-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.timeout-dialog .ui-dialog-title {
font-size: 16px;
font-weight: bold;
display: block;
padding: 0 0 15px 0;
margin-left: 80px;
}
.timeout-dialog .ui-dialog-titlebar-close {
display: none;
}
.timeout-dialog .ui-dialog-buttonpane {
margin-top: 15px;
}
.timeout-dialog ~ .ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
background-color: #000;
filter: alpha(opacity=40);
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
opacity: 0.4;
}
.timeout-dialog p {
margin: 0 0 5px 80px;
}
#timeout-keep-signin-btn {
color: #FFF;
background-color: #0f5895;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#377bb2), to(#0f5895));
background-image: -moz-linear-gradient(top, #377bb2, #0f5895);
background-image: -ms-linear-gradient(top, #377bb2, #0f5895);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #377bb2), color-stop(100%, #0f5895));
background-image: -webkit-linear-gradient(top, #377bb2, #0f5895);
background-image: -o-linear-gradient(top, #377bb2, #0f5895);
background-image: linear-gradient(top, #377bb2, #0f5895);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#377bb2', endColorstr='#0f5895', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #ffffff;
text-shadow: none;
margin: 5px 10px 5px 0;
}
#timeout-sign-out-button {
color: #FFF;
background-color: #e6e6e6;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#e6e6e6));
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #000000;
text-shadow: none;
margin: 5px 0;
}
#timeout-countdown {
font-weight: bold;
}<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<br><br>
<h1> logout function </h1>
<script type="text/javascript">
$.timeoutDialog({timeout: 10, countdown: 6, logout_redirect_url: 'https://google.com', restart_on_yes: false});
</script>