jquery - ボタンが一定時間クリックされなかった場合にメッセージを表示する

Question

を使用して、特定のボタンが一定時間 (つまり 20 秒) 以内にクリックされなかったかどうかを確認した後、メッセージを表示するにはどうすればよいjQueryですか?

ここで、マウスが 30 秒後にアイドル状態のままである場合にメッセージを表示する機能の例が既にあります。

ありがとう、カイル

Answer 1

タイムアウトを開始したら、返された ID を var に割り当てます。

function visible_a_message(){
  $('#warningMessage').show();
}
var timeout = 20000; //20 secs
var showWarningBox = setTimeout(visible_a_message, timeout);

次に、ボタンがクリックされると、そのタイムアウトをクリアします。

<input type='button' onClick='clearTimeout(showWarningBox);'" />

これは、ボタンがユーザーを別のページに移動させるという仮定に依存せず (ブラウザが何をしていても、ボタンがクリックされた後にメッセージの表示をキャンセルします)、クラスを変数として使用するという面倒な作業をスキップします。 .

Answer 2

$(function () {
  var pageLoaded = new Date();

  $("#preventButton").click(function () {
    // mark as clicked only within 20 seconds after page load
    if (new Date() - pageLoaded <= 20000) {
      $(this).addClass("clicked");
    }
  });

  setTimeout(function conditionalMessage() {
    // show a message if #preventButton had not been marked as clicked
    if ( !$("#preventButton").is(".clicked") ) {
      alert("a message appears");
    }
  }, 30000);
});

Answer 3

あなたのページソースから、私は次のようなものを使用します:

setTimeout(function(){
    $("#idletimeout").slideDown(); // show the warning bar
  },20000 //20 seconds
)

そのため、ユーザーがそのページで行うときはいつでも、ボタンをクリックしない限り警告ボックスが表示されます (実際にページを離れます)。