Question

当用户加载页面时，我会触发一个＆＃34;计时器＆＃34;将在8秒后显示消息。我的问题是，我希望阻止显示该消息，以防用户在8秒之前点击div #contentAfterIntro。

xoxo();
function xoxo(e) {
   setTimeout(showMessage, 8000);
   $("#contentAfterIntro").on('click', function(e) {
     e.stopPropagation();
   });
}

function showMessage() {   
    $('#msg').addClass('visible');
    console.log('show msg');
  }

上面的代码不起作用。在我的测试中，即使我在8秒之前点击，也会显示消息。

如何实现这一目标？

Answer 1

setTimeout会返回一个可用于取消超时的ID：

xoxo();
function xoxo(e) {
   var id = setTimeout(showMessage, 8000);
   $("#contentAfterIntro").on('click', function(e) {
     e.stopPropagation();
     clearTimeout(id); // <--- clear timeout
   });
}

function showMessage() {   
    $('#msg').addClass('visible');
    console.log('show msg');
}

如果用户在Javascript或Jquery中单击div，则停止执行函数

1 个答案: