关于 jQuery hover()、setInterval 范围和"this"问题---的问题

Question

更新---：

$(".gallery-image").each(function() {
let callInterval;
$(this).hover(function(){
clearInterval(callInterval);
}, function(){
callInterval = setInterval(intervalFunction.bind(this), 500);   
});
});

这有助于解决范围问题；但现在我有一个后续行动-

positioni处的每个图像都需要在一个单独的索引index上迭代，该索引确定了位置i处图像的当前src。每个图像的setInterval循环的起始index应该是其position，然后是每个循环的index++。但我被困在每个图像的srcindex只递增一，然后为每个setInterval循环重申相同的值。我应该在哪里声明index，使其成为每个图像的setInterval循环的本地值，但在不重置其起始值的情况下递增

这太初级了，但我不能把它全部拼凑起来

------------------

在我开始之前，我花了几个小时研究了很多问题，这些问题涉及到其中的某些部分，但我真的很难把它们放在一起，所以如果这是几件事的重复，请原谅我，哈。

我正在制作一个图像库页面，其中每个图像的占位符在所有可能的库图像中快速循环，直到用户悬停在该图像/占位符上；适当的"；图像被(静态地(显示。然后，当用户悬停在外时，该图像将恢复其快速循环。每个图像占位符同时循环通过源&彼此独立。

我遇到了麻烦，需要jQueryhover((函数的hover-in和hover-out部分来引用相同的setInterval ID，但同时，setInterval应该有一个本地范围，特定于被悬停的每个图像元素。我对jQuery也有点陌生，它和js之间的区别对我来说并不总是非常清楚

HTML:

<div class="gallery">
<img class="gallery-image" src="image0.jpg">
<img class="gallery-image" src="image1.jpg">
<img class="gallery-image" src="image2.jpg">
<img class="gallery-image" src="image3.jpg">
<img class="gallery-image" src="image4.jpg">
</div>

js:

var images = document.getElementsByClassName('gallery-image');
var callInterval;

$(".gallery-image").hover(function(){
clearInterval(callInterval);
}, function(){
callInterval = setInterval(intervalFunction.bind(this), 500);   
})
function intervalFunction(){
var position = $(this).index();     
var index = position;
if (index < 14) {
$(this).attr("src", "image" + index + ".jpg");
index++;                    
} else {
$(this).attr("src", "image" + index + ".jpg");
index = 0;
}
}

我已经尝试了vanillajavascript和jQuery，以及两者的各种组合。我是不是把它们混合错了？我是否需要多个hover((函数，并以这种方式定义setInterval函数？我是否应该为库中的每个图像手动写一个hover((，并以这种方式将setInterval函数绑定到每个图像？

发布一个片段会更有帮助吗？

我觉得我只是盯着这个问题看了这么久，现在我只是在妨碍自己，答案就在我面前……我疯了，哈。

Answer 1

我会用each迭代每个元素，为每个可以在中声明callInterval的元素创建一个新的本地作用域

$(".gallery-image").each(function() {
let callInterval;
$(this).hover(function(){
clearInterval(callInterval);
}, function(){
callInterval = setInterval(intervalFunction.bind(this), 500);   
});
});