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

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

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

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

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

我在需要 jQuery hover() 函数的 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;
    }
}

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

post 一个片段会更有帮助吗？

我觉得我一直盯着这个问题看太久了，现在我只是在按自己的方式行事，答案一定就在我面前......我正在失去我的介意哈

Answer 1

我将使用 each 遍历每个元素，为每个元素创建一个新的本地作用域，callInterval 可以在以下位置声明：

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

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

A question regarding jQuery hover(), setInterval scope, and The "this" Problem ---

javascript

jquery

scope

this

setinterval