Question

情况如下：

var FireFlipTimer = '';
var UnFlipTimer = [];
$('.CategoryBox').on('mouseenter', '.Box', function() {
    clearTimeout(FireFlipTimer);
    var $t = $(this);
    var i = $t.index();
    clearTimeout(UnFlipTimer[i]);
    BHT = setTimeout(function() { FlipCat($t); }, 250);
}).on('mouseleave', '.Box', function() {
    clearTimeout(FireFlipTimer);
    var $t = $(this);
    var i = $t.index();
    UnFlipTimer[i] = setTimeout(function() { UnFlipCat($t); }, 600);
});

基本上有一个div，在：

mouseenter - animates
mouseleave - 在动画之前600ms回到之前的状态。

我正在尝试做的事情，如果我离开鼠标并且在600毫秒间隔内进入div，则div不会回到以前的状态：）

因为有多个div我试图用数组处理setTimeout间隔，但是没有成功...

是否可以在数组中定义这些间隔？或者我应该使用不同的方法来完成这项任务。

P.S。在这种情况下的问题是只有最后一个元素对mouseleave事件作出反应，如果我从div到div，之前的div没有恢复到正常状态。

Answer 1

这是因为BHT变量只是持有一个计时器（即它不是一个计时器数组）。因此，如果将鼠标悬停在多个元素上，则第一个元素的计时器（存储在BHT变量中）将被下一个计时器覆盖。

您需要做的是将BHT变量设为数组，并像BHT2变量一样使用它。

所以它看起来像

var FireFlipTimer = [];
var UnFlipTimer = [];
$('.CategoryBox').on('mouseenter', '.Box', function() {
    var $t = $(this);
    var i = $t.index();
    clearTimeout(FireFlipTimer[i]);
    clearTimeout(UnFlipTimer[i]);
    FireFlipTimer[i] = setTimeout(function() { FlipCat($t); }, 250);
}).on('mouseleave', '.Box', function() {
    var $t = $(this);
    var i = $t.index();
    clearTimeout(FireFlipTimer[i]);
    UnFlipTimer[i] = setTimeout(function() { UnFlipCat($t); }, 600);
});

是否可以在数组中定义settimeout间隔？

1 个答案: