javascript - 如果用户单击 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:

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