Javascript 在mouseover上循环AJAX请求的图像，在mouseleave上停止循环

我有一个模型网格，每个模型由链接、图像和名称组成。在mouseenter上，我希望每秒将悬停图像的src属性替换为循环中AJAX加载的图像列表。在mouseleave上，原始图像应该恢复，循环应该停止

<div class="c-grid c-grid--models">
    <a href="#link-to-model" class="c-model" data-id="1">
        <figure class="c-model__wrap">
            <img src="http://placeholder.image" data-original="http://lazyloaded.image" class="c-model__image" />
            <figcaption class="c-model__name">Model 1</figcaption>
        </figure>
    </a>
    <a href="#link-to-model" class="c-model" data-id="2">
        <figure class="c-model__wrap">
            <img src="http://placeholder.image" data-original="http://lazyloaded.image" class="c-model__image" />
            <figcaption class="c-model__name">Model 2</figcaption>
        </figure>
    </a>
</div>

问题：

当到达最后一个图像时，循环停止。我想一直循环直到mouseleave事件被触发

鼠标移动和鼠标（重新）进入后，图像旋转速度加快，行为不稳定。第一个循环似乎没有正确停止

来回悬停时，一个模型的图像与另一个模型的图像交叉

注意：

$（this）.request（'onHover'…

是十月CMS Ajax框架的一部分。它执行一个PHP函数，返回当前悬停模型的所有图像的JSON数组

有人能帮我解决这个问题吗？可能是我使用的逻辑不正确。如果您有任何意见，我们将不胜感激。谢谢

相关的：

---

一位好朋友帮我解决了问题

我们采用了不同的方法，将图像总量和当前图像存储在每个html元素的数据属性中

现在，我们不再返回整个图像数组，而是逐个旋转图像

新HTML：

<div class="c-grid c-grid--models">
    <a href="#link-to-model" class="c-model" data-id="1" data-image-counter="5" data-current-image="0">
        <figure class="c-model__wrap">
            <img src="http://placeholder.image" data-original="http://lazyloaded.image" class="c-model__image" />
            <figcaption class="c-model__name">Model 1</figcaption>
        </figure>
    </a>
    <a href="#link-to-model" class="c-model" data-id="2" data-image-counter="5" data-current-image="0">
        <figure class="c-model__wrap">
            <img src="http://placeholder.image" data-original="http://lazyloaded.image" class="c-model__image" />
            <figcaption class="c-model__name">Model 2</figcaption>
        </figure>
    </a>
</div>

新JavaScript：

$(function() {

    var hoveredItem = null;

    // Don't fire on touch devices
    if($('.c-grid--models').length && !Modernizr.touchevents) {

        $('.c-grid--models .c-model').hover(
            function() { // mouseenter

                $(this).data("mouse-hover", true);

                if(!$(this).data("is-busy") ) {
                    $(this).data("is-busy", true);
                    GetNextImage($(this));
                }
                // get next image with delay
            }, function() { // mouseleave
                // set original image and stop loop
                $(this).data("mouse-hover", false);
                var orignalimage = $("img",$(this)).data("original");
                $("img", $(this)).attr("src", orignalimage);
            }
        );
    }

    function GetNextImage(imageContainer) {
        hoveredItem = imageContainer;

        if (parseInt(imageContainer.data("image-counter")) <= 1) return;

        setTimeout( function() {

            if (imageContainer.data("mouse-hover") == true)
            {

                imageContainer.data("current-image", parseInt(imageContainer.data("current-image")) + 1);

                $(this).request("onHover", {
                    data: {
                        id: imageContainer.data("id"),
                        image_id: imageContainer.data("current-image")
                    }, success: function (data) {

                        // Reset
                        var total = parseInt(imageContainer.data("image-counter"))-1;
                        var current = parseInt(imageContainer.data("current-image"));
                        if (current >= total) imageContainer.data("current-image", 0);

                        // async callback finished. no longer busy
                        if (imageContainer.data("mouse-hover") == true) {
                            var _data = $.parseJSON(data.result);
                            $('img',imageContainer).attr('src', _data);

                            GetNextImage(imageContainer); //Loop
                        } else {
                            imageContainer.data("is-busy", false);
                        }
                    }
                });
            } else {
                imageContainer.data("is-busy", false);
            }
        }, 1000);
    }

    $(window).scroll(function() {
        if (hoveredItem != null) {
            hoveredItem.data("mouse-hover", false);

        }
    });
});

$（函数（）{
var hoveredItem=null；
//不要在触摸设备上点火
if（$（'.c-grid--models'）.length&&！modernizer.touchevents）{
$（'.c-grid--models.c-model'）。悬停(
函数（）{//mouseenter
$（this）.data（“鼠标悬停”，true）；
if（！$（此）.data（“正忙”）{
$（此）.data（“正忙”，true）；
GetNextImage（$（this））；
}
//延迟获取下一个图像
}，函数（）{//mouseleave
//设置原始图像和停止循环
$（this）.data（“鼠标悬停”，false）；
var orignalimage=$（“img”，$（此））.data（“原始”）；
$（“img”，$（this））.attr（“src”，orignalimage）；
}
);
}
函数GetNextImage（imageContainer）{
hoveredItem=图像容器；
如果（parseInt（imageContainer.data（“图像计数器”））=total）imageContainer.data（“当前图像”），则为0；
//异步回调已完成。不再忙
if（imageContainer.data（“鼠标悬停”）==true）{
var\u data=$.parseJSON（data.result）；
$（'img'，imageContainer）.attr（'src'，_数据）；
GetNextImage（imageContainer）；//循环
}否则{
imageContainer.data（“正忙”，false）；
}
}
});
}否则{
imageContainer.data（“正忙”，false）；
}
}, 1000);
}
$（窗口）。滚动（函数（）{
如果（hoveredItem！=null）{
hoveredItem.data（“鼠标悬停”，false）；
}
});
});

需要注意的重要一点是，在滚动时并不总是在离开时触发。因此，在滚动时，我们取消图像旋转，直到用户再次输入鼠标

---

我希望这会有用。如果有不清楚的地方，请在下面发表评论，我会更新答案。

什么是

$（此）。请求
Hi，编辑它即可。它是10月CMS的一部分，记录了
$（此）
中的
$（此）。由于设置了
设置超时
，因此请求与
$（此）.attr（'data-id'）
中的请求不同。请尝试在setTimeout上方使用
var$this=$（this）
，然后使用它。非常感谢。这表明已经有了一些改进：图像加速问题已经解决。但我已经看到，当我在更多的容器上来回徘徊时，请求被混淆了：模型A的图片以模型B的顺序结束等等。。。我试着把计时器放在全局变量中，并在刹车打开/打开鼠标时清除它们。还有什么建议吗？更新代码部分。
$this.request（'onHover'…）
返回的是什么？所有图像的列表？一张照片？
$(function() {

    var hoveredItem = null;

    // Don't fire on touch devices
    if($('.c-grid--models').length && !Modernizr.touchevents) {

        $('.c-grid--models .c-model').hover(
            function() { // mouseenter

                $(this).data("mouse-hover", true);

                if(!$(this).data("is-busy") ) {
                    $(this).data("is-busy", true);
                    GetNextImage($(this));
                }
                // get next image with delay
            }, function() { // mouseleave
                // set original image and stop loop
                $(this).data("mouse-hover", false);
                var orignalimage = $("img",$(this)).data("original");
                $("img", $(this)).attr("src", orignalimage);
            }
        );
    }

    function GetNextImage(imageContainer) {
        hoveredItem = imageContainer;

        if (parseInt(imageContainer.data("image-counter")) <= 1) return;

        setTimeout( function() {

            if (imageContainer.data("mouse-hover") == true)
            {

                imageContainer.data("current-image", parseInt(imageContainer.data("current-image")) + 1);

                $(this).request("onHover", {
                    data: {
                        id: imageContainer.data("id"),
                        image_id: imageContainer.data("current-image")
                    }, success: function (data) {

                        // Reset
                        var total = parseInt(imageContainer.data("image-counter"))-1;
                        var current = parseInt(imageContainer.data("current-image"));
                        if (current >= total) imageContainer.data("current-image", 0);

                        // async callback finished. no longer busy
                        if (imageContainer.data("mouse-hover") == true) {
                            var _data = $.parseJSON(data.result);
                            $('img',imageContainer).attr('src', _data);

                            GetNextImage(imageContainer); //Loop
                        } else {
                            imageContainer.data("is-busy", false);
                        }
                    }
                });
            } else {
                imageContainer.data("is-busy", false);
            }
        }, 1000);
    }

    $(window).scroll(function() {
        if (hoveredItem != null) {
            hoveredItem.data("mouse-hover", false);

        }
    });
});