mousein 和 mouseout 的 SetTimeout，mousleave 时不等待？

Question

var time = 2000;
var t;
var th;
var hover = function($element) {
  clearTimeout(th);
  $element.parents('.tbody').find('.hotel').removeClass('hover active');
  $element.find('.hotel').addClass('hover');
}
var hoverOut = function($element) {
  clearTimeout(th);
  $element.find('.hotel').removeClass('hover');
}
var enable = function($element) {
  $element.parents('.tbody').find('.hotel').removeClass('active');
  $element.find('.hotel').removeClass('hover').addClass('active');
}
$(function() {
  $('.price').on('mouseenter', function() {
    var $this = $(this);
    th = setTimeout(function() {
      hover($this);
    }, time);
  }).on('mouseleave', function() {
    var $this = $(this);
    clearTimeout(th);
    th = setTimeout(hoverOut($this), time)
  });
  $('.price').on('click', function() {
    enable($(this));
  });
});

.price {
  padding: 1em;
  border: 1px solid;
}
.hotel {
  display: none;
  margin-top: 10px;
  border: 1px solid;
  padding: 1em;
}
.hotel.hover {
  display: block;
}
.hotel.active {
  display: block;
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price">
  <span>Hover Me</span>
  <div class="hotel">I am a hotel</div>

</div>

如你所见，当你mouseenter时它等待时间，但是当mousleave时该函数立即执行，

知道为什么吗？

Answer 1

您正在调用函数而不是传递函数引用。您可以使用setTimeout回调函数来调用带参数的函数。

当您使用 hoverOut($this) 作为 setTimeout 的回调函数时，函数 hoverOut 会立即被调用。

// See this section
th = setTimeout(function () {
    hoverOut($this)
}, time)

演示

var time = 2000;
var t;
var th;
var hover = function($element) {
  clearTimeout(th);
  $element.parents('.tbody').find('.hotel').removeClass('hover active');
  $element.find('.hotel').addClass('hover');
}
var hoverOut = function($element) {
  clearTimeout(th);
  $element.find('.hotel').removeClass('hover');
}
var enable = function($element) {
  $element.parents('.tbody').find('.hotel').removeClass('active');
  $element.find('.hotel').removeClass('hover').addClass('active');
}
$(function() {
  $('.price').on('mouseenter', function() {
    var $this = $(this);
    th = setTimeout(function() {
      hover($this);
    }, time);
  }).on('mouseleave', function() {
    var $this = $(this);
    clearTimeout(th);
    th = setTimeout(function() {
      hoverOut($this)
    }, time)
  });
  $('.price').on('click', function() {
    enable($(this));
  });
});

.price {
  padding: 1em;
  border: 1px solid;
}
.hotel {
  display: none;
  margin-top: 10px;
  border: 1px solid;
}
.hotel.hover {
  display: block;
}
.hotel.active {
  display: block;
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price">
  <span>Hover Me</span>
  <div class="hotel">I am a hotel</div>

</div>

Answer 2

鼠标悬停时，您是运行这个：

setTimeout(function () {
        hover($this);
    }, time);
})

休假期间，你是运行这个：

th = setTimeout(hoverOut($this), time)

请注意，hoverOut 没有像 hover 一样被包裹在 function 中 - 所以它立即是运行，函数的结果是被传递给 setTimeout 而不是 hoverOut 函数引用本身。

mousein 和 mouseout 的 SetTimeout，mousleave 时不等待？

SetTimeout for mousein and mouseout, doesn't wait when mousleave?

javascript

jquery

settimeout

mouseleave