jquery - jquery clear setTimeout inside each on mouseleave

Question

如何清除鼠标悬停时在每个函数内运行的 setTimeout 函数

这是简单的代码

var timer;

function Close() {
    clearTimeout(timer);
    $(child).css({left:0});
}

$(element).mouseover(function() {
    $(child).each(function(i) {
        var timer = setTimeout(function() {
                        $(child).eq('+i+').stop().animate({left:300});
                    }, 350 * (i + 1))
    });
})

$(element).mouseleave(function() {
    Close()
})

它工作正常，但问题是当鼠标在完成动画之前快速移动时，它们不会首先停止并返回默认位置，因为当然 setTimeout 函数未完成。

Answer 1

试试这个方法：

function Close() {
    $(child).each(function() {
        window.clearTimeout($(this).data('timerId')); //clear it here
    }).css({left:0});
}

$(element).mouseenter(function() {
    $(child).each(function(i) {
          var timer =  window.setTimeout(function() {
                        $(child).eq(i).stop().animate({left:300});
                    }, 350 * (i + 1));

          $(this).data('timerId', timer); //save timer id here
    });
})

$(element).mouseleave(function() {
     Close();
});

另请注意，对事件mouseover不是（这是对mouseout）。mouseleavemouseenter

小提琴

这是另一个清除动画的版本（不确定您在寻找什么）

   function Close() {

        $child.each(function () {
            window.clearTimeout($(this).data('timerId')); //clear it here
        });

        $child.stop(true, true, true).css({left:0}); //clear the queues and reset the position
    }

$(element).mouseenter(function () {
    $child.each(function (i) {
        var timer = window.setTimeout(function () {
            $child.eq(i).stop().animate({
                left: '300px'
            });
        }, 350 * (i + 1));

        $(this).data('timerId', timer); //save timer id here
    });
})

$(element).mouseleave(function () {
    Close();
});

小提琴