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