鼠标进入和离开时超时

Question

我有一个无序列表，将鼠标悬停在每个子元素上时会更改位置。如果我没有在鼠标悬停上设置超时，则由于位置更改，它会快速跳过列表。我注意到的是，当悬停一个li然后跳到另一个li时，超时没有结束。我必须离开li元素，等待然后重新悬停以取消超时。

我希望能够悬停每个li元素来更新ul位置，但是要超时，因此它不会一直在列表中跳转。

如果这不是解决此问题的最佳方法，我愿意接受其他建议。

var time, allow = true;
$("ul").children("li").each(function(index) {
    $(this).on('mouseover', function() {
        if(allow == true) {
            var i = index + 1;
            var calc = $('ul').height() / $('ul').children("li").length * i;
            $("ul").css('transform', 'translate(-50%, -'+ calc +'px)');
            allow = false;
        }
    }).mouseout(function () {
        time = setTimeout(function () {
            allow = true;
        }, 1000);
    });
});

更新：当离开当前元素然后将鼠标悬停在下一个元素上时，“允许”尚未结束鼠标移出延迟。

var time, allow = true;

$("ul").children("li").each(function(index) {

    $(this).find('a').mouseover(function() {
        if(allow == true) {
            allow = false;
            var i = index + 1;
            var calc = $('ul').height() / $('ul').children("li").length * i;
            $("ul").css('transform', 'translate(-50%, -'+ calc +'px)');
        }
    });

    $(this).mouseout(function () {
        time = setTimeout(function () {
            allow = true;
        }, 1000);
    });

});

Answer 1

.bind()已过时，因此，出于兼容性原因而不必这样做时，请改用.on()。

尽管如此，您正在对.mouseout()的返回值调用bind()。有no documented return value bind或on，因此您可能应该这样打一个单独的电话，而此时您只需同时使用简写mouseover()和mouseout()：

$("ul").children("li").each(function(index) {
    $(this).mouseover(function() {
        if(allow == true) {
            // do stuff
            allow = false;
        }
    })
    $(this).mouseout(function () {
        time = setTimeout(function () {
            allow = true;
        }, 1000);
    });
});