3

Webページに次の機能を追加したいと思います。ユーザーが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>
4

5 に答える 5

7

jsFiddle デモ

var tim = setTimeout(function(){
    $('#popupBoxAccept').click();
},30000);

そして、手動クリックの中で：

$('#popupBoxAccept').click(function(){
     clearTimeout(tim);
      // ........
});

そして@Eliasが示唆するように：

$('#popupBoxDecline').click( function() {
    clearTimeout(tim);           
    //...
});
于 2012-09-06T09:33:57.020 に答える
4

簡単なオプションの 1 つは、フラグとsetTimeout関数を使用することです。

var clicked = false;
$("#popupBoxAccept").click(function() {
    clicked = true;
    //...
});

setTimeout(function() {
    if (!clicked) {
        $("#popupBoxAccept").click();
    }
}, 30000);
于 2012-09-06T09:34:07.667 に答える
1

タイムアウトを設定するだけです。

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);
});

現在、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
});

なぜこれが便利なのですか？var timシンプル：タイムアウトへの参照を失うことなく、別のコンテキストで使用できるようになりました。クロージャ、名前はそれをすべて言います：すべての変数と参照は同じスコープにきちんとバンドルされており、アクセスすることはできませんが、スコープ内から宣言されています：

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
于 2012-09-06T09:37:23.710 に答える
1

これを試して

setTimeOut(function(){
  $('#popupBoxAccept').click( function() {            
    //...
});
}, 30000);
于 2012-09-06T09:34:18.467 に答える
0

$(document).ready()これを呼び出しに入れてみてください：

setTimeout(function() {
    if(!clicked) {
        $('#popupBoxAccept').click();
    }
}, 30000);

次に変更

$('#popupBoxAccept').click( function() {
    //...
});

に

var clicked = false;
$('#popupBoxAccept').click( function() {
    clicked = true;
    //...
});
于 2012-09-06T09:34:36.253 に答える