Question

我有一个带有数据属性（图像对象）的锚，在mouseenter上我想循环遍历这些图像，然后在mouseleave上我希望这个循环结束。

这是我到目前为止所拥有的内容，但在each变量发生变化之前，即使有延迟，似乎也会运行shouldRotateImages。所以我现在能做些什么，我有点迷失。

var shouldRotateThumbnails = false;
$(document).on('mouseenter', '#videos-list a', function () {
    shouldRotateThumbnails = true;
    rotateThumbnails($(this));
});

$(document).on('mouseleave', '#videos-list a', function () {
    shouldRotateThumbnails = false;
});

function rotateThumbnails(video) {
    var thumbnails = video.data('thumbnails');
    var image = video.find('img');
    $.each(thumbnails, function (k, v) {
        if (!shouldRotateThumbnails) {
            return false;
        }
        setTimeout(function () {
            image.attr('src', v);
        }, (300 * k));
    });
}

Answer 1

使用@ squint的建议进行管理。

var t;
$(document).on('mouseenter', '#videos-list a', function () {
    var imageKey = 0;
    var thumbnails = $(this).data('thumbnails');
    var image = $(this).find('img');
    t = setInterval(function () {
        image.attr('src', thumbnails[imageKey]);
        imageKey += 1;
        if (imageKey == thumbnails.length) {
            imageKey = 0;
        }
    }, 300);
});
$(document).on('mouseleave', '#videos-list a', function () {
    clearInterval(t);
    var image = $(this).find('img');
    var thumbnail = $(this).data('original-thumbnail');
    image.attr('src', thumbnail);
});

鼠标离开时停止每个循环

1 个答案: