如果用户单击Javascript或jQuery中的div，则停止执行功能

Question

当用户加载页面时，我会触发一个“计时器”，该计时器将在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，您可以使用该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');
}