Javascript 仅当mouseleave事件持续时间超过几秒钟时才触发它-jQuery

我创建了一个幻灯片，当用户试图离开页面时会触发（鼠标移向选项卡/url）。问题是它会立即开火，这样做时会很烦人，因此

我想到了使用setTimeout和clearTimeout来延迟事件的触发，直到mouseleave事件发生后500毫秒，并且只有当它们在持续时间内保持在那里时

这意味着，我希望只有当用户鼠标移动超过500毫秒时，事件才会触发。否则，如果它们在持续时间之前返回，则不会触发事件。

以产生滑出。确保在文档中单击，然后向顶部滚动

JS

$(() => {
  // Sliding helper nav initial position hidden
  function showSidebar() {
    $('.nav__slide').removeClass('hidden_nav__slide');
    $('.nav__slide').animate({
      right: '0px',
    }, {
      queue: false,
      duration: 800,
    });
    $('body').addClass('overlay');
  }


  // Limiting mouse events from firing too often.
  function handleMouseOut(e) {
    function debounce(func, wait, immediate) {
    let timeout;
      return (...args) => {
        const context = this;
        const later = () => {
          timeout = null;
          if (!immediate) {
            func.apply(context, args);
          }
        };

        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    }
    const event = e || window.event;
    const from = event.relatedTarget || event.toElement;
    // Handling when the mouseover is outside of the clientY (in the browser/tab area above)
    // but not outside of the browser window

    if ((!from || from.nodeName === 'HTML') && event.clientY <= 0) {
      debounce(showSidebar, 1000, true)();
    }
  }

  // Hiding the sliding helper div after the user clicks the close button.
  function hideSidenav() {
    $('body').removeClass('overlay');

    setTimeout(() => {
      $('.nav__slide').addClass('hidden_nav__slide');
    }, 700);


    $('.nav__slide').animate({
      right: '-450px',
    }, {
      queue: false,
      duration: 800,
    });
  }



  // Closing button to hide the sliding helper nav.
  $('.js__button__close').click(() => {
    hideSidenav();
    document.removeEventListener('mouseout', handleMouseOut);
  });




  // Initializing the event.
  function init() {
    if (document.addEventListener) {
      document.addEventListener('mouseout', handleMouseOut, false);
    }
  }

  init()
});

.nav__slide {
  /* Positioning */
  position: fixed;
  /* Visuals */
  background: #ffffff;
  /* Positioning */
  top: 0;
  right: -450px;
  width: 390px;
  height: 100%;
  z-index: 99;
  /* Box-Model and Display */
  overflow-y: auto;
  overflow-x: hidden;
}
.nav__slide .button__close {
  /* Visuals */
  background: #ffffff;
  /* Box-Model and Display */
  height: 30px;
  width: 30px;
  cursor: pointer;
  float: left;
}

.nav__slide .button__close:before {
  /* Box-Model and Display */
  display: flex;
  justify-content: center;
  padding-top: 20%;
  content: "\2715";
}

.hidden_nav__slide {
  /* Visuals */
  visibility: hidden;
}

.nav__slide .content-container {
  /* Box-Model and Display */
  display: flex;
  justify-content: center;
  flex-flow: column wrap;
  /* Typography */
  font-weight: 400;
}

.nav__slide .content__logo {
  /* Box-Model and Display */
  width: 170px;
  height: 60px;
}

.nav__slide .logo-line {
  /* Visuals */
  border-bottom: solid #dbdbdb 2px;
  border-style: ridge;
  opacity: 0.1;
  /* Box-Model and Display */
  width: 100%;
  margin-left: -1%;
}

.nav__slide .content-header {
  /* Positioning */
  display: flex;
  justify-content: center;
  /* Typography */
  font-weight: 200;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  /* Box-Model and Display */
  margin-bottom: 5%;
  margin-top: 25%;
}

/* This will likely be removed depending
on the image that is used */

.nav__slide .stand-in-image {
  /* Box-Model and Display */
  width: 240px;
  height: 140px;
}

.nav__slide .content-container__header {
  /* Typography */
  font-family: Arial, Helvetica, sans-serif;
  list-style: none;
  font-size: 16px;
  line-height: 10px;
  font-weight: 600;
  /* Box-Model and Display */
  margin-left: 20%;
}

.nav__slide .content-list__item {
  /* Typography */
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 26px;
  font-size: 15px;
  /* Box-Model and Display */
  display: flex;
  padding: 2%;
  margin-left: 10%;
}

.nav__slide .coupon-button {
  /* Typography */
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  /* Visuals */
  background-color: #b2ca48;
  /* Box-Model and Display */
  padding: 10%;
  margin-top: 10%;
  margin-right: 5%;
}

.nav__slide .main-content {
  /* Positioning */
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  z-index: 0;
}

/* Adding the overlay:after class onto the body  */

.overlay:after {
  /* Box-Model and Display */
  content: "";
  /* Positioning */
  position: fixed;
  width: 100%;
  height: 100%;
  /* Visuals */
  opacity: 0.9;
  background-color: #373737be;
  /* Positioning */
  left: 0;
  top: 0;
}

我还找到了一些其他的答案，这些答案与我在延迟事件触发时的想法类似

我一直在使用它，但由于代码比较旧（几个月前），而且我还是比较新的。我学到了需要： -对正在做的事情做出更好的评论 -在构建解决方案时，确保完全了解您正在使用的代码

谢谢你的帮助，我会继续尝试和调整它，但没有找到任何具体的工作

我想我能做到。
我不太明白你说的变量是什么意思，

immediate

。
另外，我对您的代码进行了一些删减，但我认为这很好。

// Timer
let timer;
// Called, when mouse enter to the document.
function handleMouseEnter() {
    // clear timer(stop).
    clearTimeout(timer);
}

// Limiting mouse events from firing too often.
function handleMouseLeave() {
    timer = setTimeout(function() {
        // Show side bar.
        showSidebar();
        // Event off. (ShowSideBar will run only once.)
        $(document)
            .off('mouseleave', handleMouseLeave)
            .off('mouseenter', handleMouseEnter);
    }, 500);
}

// Initializing the event.
function init() {
    // the same as document.addEventListener('mouseleave~
    $(document)
        .on('mouseleave', handleMouseLeave)
        .on('mouseenter', handleMouseEnter);
}

已更新

// Limiting mouse events from firing too often.
function handleMouseLeave(e) {
    // you can get original event.
    console.log(e.originalEvent);

---

您的小提琴不完整

all.js

未找到。你能在问题的代码片段中重现这个问题吗？读一读。小提琴在我这边起作用。不知道为什么它不会去。我来看看，看看。谢谢*编辑小提琴。也许现在对你有用？当用户在页面外部停留500毫秒时，你想滑动吗？或者只是在500毫秒后触发？修复了all.js-

未找到的问题http://fiddle.jshell.net/daneiswork/2fgh3c6w/24/show/style.css

我试图在鼠标离开500毫秒后才能滑出。因此，如果他们在500毫秒前离开并回到窗户，那么窗户就不会着火。抱歉说不清楚，我很感激。现在我明白了，我没有说我希望它只在用户浏览文档时发生。我目前正在尝试实现以下部分。因此，它只有在向上移动时才会开火，而不是向左、向右或向下移动。如果（！from | | from.nodeName=='HTML'）&&event.clientY哦，那么，

if语句

有意义。我没有注意到，但我很高兴我能帮上忙。是的。我会看看我是否能弄明白。非常感谢。因为我改变了使用jQuery的实现方式，我为你添加了一些提示。（更新了我的答案）好的。太好了。非常感谢！

// Limiting mouse events from firing too often.
function handleMouseLeave(e) {
    // you can get original event.
    console.log(e.originalEvent);