[英]Execute the function automatically in 30 seconds, if the button is not pressed
I want to add the following functionality to my web page: if a user has not pressed the 'Accept' button during 30 seconds, then $('#popupBoxAccept').click( function() {..}
is executed automatically. 我想在我的网页上添加以下功能:如果用户在30秒内没有按下“接受”按钮,那么
$('#popupBoxAccept').click( function() {..}
会自动执行。
$(document).ready(function() {
loadPopupBox();
});
function loadPopupBox() { // to load the Popupbox
$('#popup_box').fadeIn("slow");
}
$('#popupBoxAccept').click( function() {
//...
});
$('#popupBoxDecline').click( function() {
//...
});
<div id="popup_box">
<a id="popupBoxAccept">Accept</a>
<a id="popupBoxDecline">Decline</a>
</div>
var tim = setTimeout(function(){
$('#popupBoxAccept').click();
},30000);
And inside the manual click: 在手册内点击:
$('#popupBoxAccept').click(function(){
clearTimeout(tim);
// ........
});
And as suggested by @Elias: 并且正如@Elias所建议的那样:
$('#popupBoxDecline').click( function() {
clearTimeout(tim);
//...
});
One simple option is to use a flag and setTimeout
function: 一个简单的选择是使用flag和
setTimeout
函数:
var clicked = false;
$("#popupBoxAccept").click(function() {
clicked = true;
//...
});
setTimeout(function() {
if (!clicked) {
$("#popupBoxAccept").click();
}
}, 30000);
try this 尝试这个
setTimeOut(function(){
$('#popupBoxAccept').click( function() {
//...
});
}, 30000);
Just set a timeout: 只需设置超时:
var tim;//global, I'll provide a (more complex) solution that doesn't need them, too
function loadPopupBox() { // to load the Popupbox
$('#popup_box').fadeIn("slow");
tim = setTimeout(function()
{
$('#popup_box').click();
},30000);
}
$('#popupBoxAccept').click( function() {
clearTimeout(tim);
});
now, without the use of EVIL global variables: 现在,不使用EVIL全局变量:
$(document).ready(function()
{
(function(popup,accept,decline)
{
popup.fadeIn("slow");
var tim = setTimeout(function()
{
accept.click();//<-- access to reference is preserved
},30000);
accept.click(function()
{
clearTimeout(tim);
//do accept stuff
});
decline.click(function()
{
clearTimeout(tim);//<-- need that here, too!
//do decline stuff
});
})($('#popup_box'),$('#popupBoxAccept'),$('#popupBoxDecline'));
//pass all 3 elements as argument --> less typing, and is more efficient:
//the DOM is only searched once for each element
});
Why is this useful? 为什么这有用? Simple: you can now use
var tim
in another context, without loosing the reference to your timeout. 简单:您现在可以在另一个上下文中使用
var tim
,而不会丢失对超时的引用。 Closure, the name says it all: all the variables and references are neatly bundled together in the same scope, and cannot be accessed but from within the scope they are declared: Closure,名称说明了一切:所有变量和引用都整齐地捆绑在同一范围内,并且无法访问,但是在声明的范围内:
var foo = (function()
{
var invisible = 'Now you see me';
return function()
{
return invisible;
}
};
console.log(invisible);//<-- undefined
var invisible = 'Now you don\'t';
console.log(foo());//<-- Now you see me
console.log(invisible);//Now you don\'t
Try to put this in your $(document).ready()
call: 尝试将其放入
$(document).ready()
调用中:
setTimeout(function() {
if(!clicked) {
$('#popupBoxAccept').click();
}
}, 30000);
Then change 然后改变
$('#popupBoxAccept').click( function() {
//...
});
to 至
var clicked = false;
$('#popupBoxAccept').click( function() {
clicked = true;
//...
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.