jquery hideインタラクションが発生しない場合の要素

Question

ページの読み込み時に画面に要素がポップアップして5秒後に非表示になります。私は、ユーザーがポップアップと対話しない場合に隠れるロジックを作成しようとしています。ユーザーが対話すると、表示されたままになります。ユーザーが要素を離れると、タイマーは再び非表示になります。誰かがロジックで私を助けることができる場合

<div id="popup"> 
    Some popup 
    <input type="email" placeholder="enter email" /> 
</div> 

<div id="popup-button" style="display:none;"> 
    button to open the popup 
</div> 

// on load, 5 seconds starts 
var goTimeout = setTimeout(function(){ 
    $('#popup').css("display","none"); 
    $('#popup-button').css("display","block"); 
    }, 5000); 
    goTimeout; 


// when mouse enter's popup element and/or user types in input 
// should turn off the setTimeout 
$(document).on("touchstart click mouseenter keyup", "#popup", function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
    console.log(e); 
    clearTimeout(goTimeout); 
}); 


// when user mouse leave's the popup the timer starts again, but 
// if user is still focused within input field, don't start until 
// user clicks outside of the element 
$(document).on("mouseleave", "#popup", function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
    console.log(e); 
    clearTimeout(goTimeout); 
    goTimeout; 
}); 

等、それは私はあなたがのonmouseover、れるonmousedownのようなDOM要素を使用することができます

Answer 1

goTimerは関数ではありませんが、あなたはそれがあなたのmouseleave部分の端に1つであるようにそれを呼び出すようにしようとしています。タイマーを作成/開始する関数を作成してください。

var goTimeout; 
function myTimer() { 
    goTimeout = setTimeout(function() { 
    $('#popup').css("display", "none"); 
    $('#popup-button').css("display", "block"); 
    }, 5000); 
} 
myTimer(); 

それからちょうどであるためにあなたのmouseleaveセクションの最後の行を変更します：このような

myTimer();代わりのgoTimeout;

ここJSFiddleは、チェックアウトすることです。

Answer 2

に好きなように動作するようになっていない、思っていた

また

、最後に宣言されたタイムアウトはエラーであるように見えますが、関数よりも変数やカウントのほうが多くなります。あなたが好きなものを持つことができます

、

Gotimeout=5; 
clearTimeout(goTimeout);