关于 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++。但是我被困在每个图像的 src index 只增加一的地方，然后为每个 setInterval 循环重复相同的值。我到底应该在哪里声明 index 以便它在每个图像的 setInterval 循环中是本地的，但在不重置其起始值的情况下递增......？

这太简单了，但我不能把它们全部放在一起。

------

在我开始之前——我已经花了几个小时来研究解决某些部分的 SO 问题，但我真的很难把它们放在一起，所以如果这是重复的几件事，请原谅我，哈.

我正在制作一个图片库页面，其中每个图片的占位符会快速循环浏览所有可能的图库图片，直到用户将鼠标悬停在该图片/占位符上，在该图片/占位符上（静态）显示“正确”的图片。然后当用户悬停时，该图像恢复其快速循环。每个图像占位符同时在来源之间循环，并且彼此独立。

我在需要 jQuery hover() 函数的悬停部分和悬停部分来引用相同的 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;
    }
}

我尝试过 vanilla javascript 和 jQuery，以及两者的各种组合。我是否以错误的方式混合它们？我是否需要多个 hover() 函数，并以这种方式定义 setInterval 函数？我是否应该为画廊中的每张图片手动编写一个 hover() 并以这种方式将 setInterval 函数绑定到每张图片？

发个sn-p会不会更有帮助？

我觉得我一直盯着这个问题太久了，现在我只是在用自己的方式，答案一定就在我面前......我疯了哈.

Answer 1

我会用each 遍历每个元素，为每个元素创建一个新的本地范围，callInterval 可以在其中声明：

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