javascript - jquery 在没有交互发生时隐藏元素

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

想知道是否有人可以帮助我解决逻辑，而不是让它按照我喜欢的方式工作

Answer 1

goTimer 不是一个函数，但您试图像调用 mouseleave 部分末尾的函数一样调用它。创建一个创建/启动计时器的函数，然后您就可以开始了。像这样:

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

然后只需将 mouseleave 部分的最后一行更改为:

myTimer(); 而不是 goTimeout;

这是一个JSFiddle查看。