如何停止功能？ （jQuery，.hover（））

Question

当您将鼠标悬停在图片的正方形上时，请使用间隔功能一个接一个地更改。无法解决2个问题。 1.该功能应仅在该点所在的正方形处启动。 2.如果光标离开正方形，该功能应停止。

帮我思考。

$('.block').hover(function(){
    setInterval(myFuncSuper2, 3000);
  });

    // Change pic on hover
    function changePic(i) {
        setTimeout(function () {
            jQuery(".hero-cat_" + i).addClass("active");
            jQuery(".hero-cat_" + i).siblings().removeClass("active")
        }, i * 1000)
    }
    function myFuncSuper2() {
        for (let i = 0; i <= 3; i++) {
            changePic(i);
        }
    }

.block {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: relative;
  cursor: pointer;
}

.block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  display: none;
}

.block img.active {
  display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="block">
  <img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200"  class="hero-cat_1">
  <img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200"  class="hero-cat_2">
  <img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200"  class="hero-cat_3">
</div>
<div class="block">
  <img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200"  class="hero-cat_1">
  <img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200"  class="hero-cat_2">
  <img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200"  class="hero-cat_3">
</div>

Answer 1

-编辑：添加了清除在myFuncSuper2中创建的超时---

设置悬停功能，并清除间隔

var interval = null;
var timeouts = [0,0,0];

$('.hero-category').hover(function () {
  interval = setInterval(myFuncSuper2, 3000)
}, function() {
  if (interval) clearInterval(interval);
  for (var i = 0; i < timeouts.length; i++) {
    if (timeouts[i] !== 0) {
      clearTimeout(timeouts[i]);
    }
  }
});

function myFuncSuper2() {
    for (let i = 0; i <= 3; i++) {
      timeouts[i] = setTimeout(function() {
          jQuery(this).find(".hero-cat_" + i).addClass("active");
          jQuery(this).find(".hero-cat_" + i).siblings().removeClass("active")
      }.bind(this), i * 300)
    }
}

Answer 2

您要实现的目标需要两件事：

1. mouseenter和mouseleave

   1.2。因为mousehover会在您悬停时继续添加事件。您需要停止该操作。

2. 和this用于当前元素的上下文

   2.1，因为您只需要为选定的元素启用悬停，而不是整个.block集

$('.block').mouseenter(startMyFunc);
$('.block').mouseleave(stopMyFunc);

var myInterval;

function myFuncSuper2() {
    for (let i = 0; i <= 3; i++) {
      setTimeout(function() {
          jQuery(this).find(".hero-cat_" + i).addClass("active");
          jQuery(this).find(".hero-cat_" + i).siblings().removeClass("active")
      }.bind(this), i * 300)
    }
}

function startMyFunc() {
    myInterval = window.setInterval(myFuncSuper2.bind(this), 1000)
}

function stopMyFunc() {
    if (myInterval) {
        clearInterval(myInterval);
    }
}

.block {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: relative;
  cursor: pointer;
}

.block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  display: none;
}

.block img.active {
  display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="block">
    <img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200" class="hero-cat_1">
    <img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200" class="hero-cat_2">
    <img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200" class="hero-cat_3">
</div>
<div class="block">
    <img src="https://avatars.mds.yandex.net/get-pdb/38069/39782144-fdc6-473f-b757-b8209a2e4b31/s1200" class="hero-cat_1">
    <img src="https://avatars.mds.yandex.net/get-pdb/225396/aea85590-65df-49b9-b959-d14cefbd9d38/s1200" class="hero-cat_2">
    <img src="https://avatars.mds.yandex.net/get-pdb/34158/e223aed5-4ea8-4e85-bb69-88e207b6c16b/s1200" class="hero-cat_3">
</div>