用于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(function () {
        hover($this);
    }, time);
})

休假时，你正在运行：

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

请注意，hoverOut没有以function的方式包含在hover中 - 因此它会立即运行，并且函数的结果将传递给{{1}而不是setTimeout函数引用本身。

Answer 2

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

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

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

<强>演示

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;