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

Question

When you hover over the squares of the picture change one after another using the interval function. Can't solve 2 problems. 1. The function should be started only at the square on which the point. 2. The function should stop if the cursor has left the square.

Help me think.

 $('.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

-- Edit: added clearing the timeouts created in myFuncSuper2 ---

Set the function for hover off, and clear the interval

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

What you are trying to achieve needs two things:

1. mouseenter and mouseleave

   1.2. because mousehover will keep on adding events when you keep hovering. you need to stop that.

2. And this for context of current element

   2.1 because you need to enable only selected element for hover, not entire .block set

 $('.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>