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

from your page source I would use something like this:

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

so whenever user do on that page he will see warning box unless he clicks on the button (leave the page actually)