Javascript 在if循环中使用setTimeout时捕获SETTIMERID

我正在使用setTimeout在mouseenter上创建一个循环中的暂停，需要捕获计时器ID，以便它可以在mouseleave上停止

在我试图编写代码之前，我认为这将是一项简单的任务

我有一个缩略图库，在缩略图上方悬停时，我想循环浏览一系列无休止循环的图像；有点像迷你旋转木马。我通过交换缩略图的源文件路径的常用方法来实现这一点；我捕获并存储缩略图的文件路径，循环浏览一组图像，然后替换mouseleave上的原始缩略图。没什么复杂的

我把它编码好了，除了鼠标外，其他一切都很好。不管鼠标停留的时间有多短，这个函数都会在整个图像数组中循环。我最终发现，实际上不能暂停或停止函数，但通过将其包装在setTimeout中并使用布尔标志，可以创建这种效果。这是我在用户1693593中找到的答案，它非常简单，并且工作得非常好

    var doLoop = false;

    function loopy() {
        if (doLoop === true) {
            setTimeout(function () {
            // code to loop through array of images
            loopy();
            }, 11);
        }
    };

我正在使用jQuery的hover方法设置标志

    $(".thumbnails").hover(function() {
        doLoop = true;
    }, function() {
        doLoop = false;
    });

所以我把它编码了起来，当你把鼠标悬停在第一个缩略图上时，效果非常好，但是当你移动到一个新的缩略图上时，一切都乱套了。我发现这是因为第一次超时没有被取消，随后的超时会相互干扰。我可以从各种堆栈溢出问题中看出这是一个常见问题。我发现setTimeout返回一个ID，如果您想用clearTimeout取消它，您需要捕获该ID

因此，我在MDN上找到了一个示例，其中您将超时ID存储在一个变量中。它看起来很简单，所以我把它编码了起来，它工作得很好。我可以在控制台中看到所有超时都是用唯一的ID设置的，并且随着鼠标在缩略图上移动而取消……但是现在我无法让循环工作

我不明白为什么在JavaScript中这样复杂，当然像这样的东西是一个常见的要求

请有人同情一个相对的新手，并解释一下我如何编写user1693593的示例，使其在多个元素上进行鼠标移动时工作。我不介意它是使用setTimeout还是setInterval

---

请不要将此标记为重复–如果有人这样做，我会理解的–但是我已经对Stack Overflow加上MDN和W3Schools进行了全面的研究，我找不到一个具体回答此问题的示例，当然也不是我能理解的示例。

将引用存储在某个地方并取消它

变量计时器=null 函数addOne元素{ elem.textContent=+elem.textContent+.1.toFixed1 } 元富 .onMouseCenter，函数{ var elem=此 timer=window.setIntervalfunction{addOneelem}，100 }.离开，离开{ if timer window.clearIntervaltimer } 福娃{ 宽度：100px； 线高：100px； 边框：1px纯黑； 文本对齐：居中； } 1. 1. 1. 1.

---

1只需跟踪当前执行循环的元素，而不是布尔值true/false

var loopEl;

function loopy() {
    if (loopEl) {
        setTimeout(function () {
        // code to loop through array of images
        // do something with loopEl
        loopy();
        }, 11);
    }
};

$(".thumbnails").hover(function() {
    loopEl = this;
}, function() {
    loopEl = false;
});

---

你为什么不使用setInterval？那么把它设置为另一个全局变量…@nickzoum我现在只是想让它工作，但是我很可能会切换到setInterval。if语句的条件是什么。另外，mouseover上的loopEl只是给了我缩略图的文件路径。这是不是以某种方式将计时器绑定到元素？if的条件是if-loopEl-意思是如果loopEl包含一些非零、未定义、false等的值。没有绑定元素，您只需操作loopEl捕获的元素，即正在悬停的对象。我仍然遇到同样的问题，它在第一个缩略图上运行良好，但在随后悬停的每个缩略图上都会加快速度。必须有多个计时器正在运行。在鼠标上方的loopEl=this之后，你会在哪里调用loopy？只要在页面加载时调用它一次。就几个问题。1是否使用null作为计时器变量的初始值，以便在缩略图第一次悬停时if语句起作用。2为什么选择使用.on而不是.hover？是否有某种性能优势？我注意到.on也适用于子元素。1因为您应该声明变量2 hover只是一个helper方法，所以在hover的文档中调用了相同的事件。这与最初的代码（由user1693593编写）不太像，但它简洁且工作完美，所以我接受它作为答案。谢谢你的帮助和耐心@epascarello，还有你@James。