根据鼠标位置暂停和恢复SetInterval

Question

我有这些气泡，它们与它们背后的背景联系在一起。每个气泡与不同的背景相关联，例如，如果第一个气泡是活动气泡，则背景为红色，如果第二个气泡为活动气泡，则背景变为蓝色，依此类推。要激活气泡，您只需将鼠标悬停在其上即可。另一种改变活动气泡的方法是什么都不做，每隔5秒，下一个气泡就会变得活跃。

一切运行正常，正如预期的那样，但有一个小错误。

如果你将鼠标悬停在一个气泡上，这将使该气泡处于活动状态，但是如果你最终(5秒后)将鼠标停留在那里，那么活动的气泡将成为下一个气泡，尽管鼠标位于原来的气泡上。问题是-有没有一种方法可以在用户将鼠标放在任何圆圈上时暂停setInterval功能，并在鼠标不在任何气泡上时重新开始setInterval？

​

jQuery($ => {
  let $rect = $('.rect')
  let $circles = $('.circle').on('mouseover', setActiveCircle)
  $circles.first().trigger('mouseover')

  function setActiveCircle() {
    $circles.removeClass('active-circle')
    $(this).addClass('active-circle')
    $rect.removeClass('rect-1 rect-2 rect-3 rect-4').addClass($(this).data('rect'))
  }

  setInterval(function() {
    let $activeCircle = $circles.filter('.active-circle')
    let $targetCircle = $activeCircle.next()
    if ($targetCircle.length === 0)
      $targetCircle = $circles.first()

    setActiveCircle.call($targetCircle)
  }, 5000)
})

.rect {
  display: flex;
  justify-content: center;
  background: #fbc1d7;
  padding: 50px;
  background-size: cover;
  background-position: center;
}

.rect-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 1100px;
}

.rect-1 {
  background: red;
}

.rect-2 {
  background: blue;
}

.rect-3 {
  background: yellow;
}

.rect-4 {
  background: green;
}

.grid-2-small {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.circle {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: #910700;
  opacity: .4;
  transition: ease .5s;
  cursor: pointer;
}

.circle:hover {
  opacity: .7;
  transform: scale(1.05);
  text-decoration: none;
}

.active-circle {
  opacity: .9;
  transform: scale(1.25);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rect">
  <div class="rect-container">
    <div></div>
    <div>
      <div class="grid-2-small">
        <a class="circle" data-rect="rect-1"></a>
        <a class="circle" data-rect="rect-2"></a>
        <a class="circle" data-rect="rect-3"></a>
        <a class="circle" data-rect="rect-4"></a>
      </div>
    </div>
  </div>
</div>

​

Answer 1

如果其中一个圆当前处于活动状态，则可以在间隔处理程序中进行检查。使用.circle:hover选择器比较容易：

  ...

  setInterval(function() {
    // check if one of the circle is currently active (mouse over)
    const hoverCircle = document.querySelector('.circle:hover');
    if (hoverCircle) {
        return; // do not change the background
    }
    let $activeCircle = $circles.filter('.active-circle')
    let $targetCircle = $activeCircle.next()
    if ($targetCircle.length === 0)
      $targetCircle = $circles.first()

    setActiveCircle.call($targetCircle)
  }, 5000)
})
...

Answer 2

您可以在此处使用clearInterval，这是一个有效的jsfiddle示例

​

jQuery($ => {
  let $rect = $('.rect')
  let $circles = $('.circle').on('mouseover', setActiveCircle)
  $circles.first().trigger('mouseover')

  function setActiveCircle() {
    $circles.removeClass('active-circle')
    $(this).addClass('active-circle')
    $rect.removeClass('rect-1 rect-2 rect-3 rect-4').addClass($(this).data('rect'))
  }
  function circletimer(){
    let $activeCircle = $circles.filter('.active-circle')
    let $targetCircle = $activeCircle.next()
    if ($targetCircle.length === 0)
      $targetCircle = $circles.first()

    setActiveCircle.call($targetCircle)
  }

 var stopinter=setInterval(circletimer(), 5000)
  
  if(  $circles.first().trigger('mouseover'))  clearInterval(stopinter)


})

.rect {
  display: flex;
  justify-content: center;
  background: #fbc1d7;
  padding: 50px;
  background-size: cover;
  background-position: center;
}

.rect-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 1100px;
}

.rect-1 {
  background: red;
}

.rect-2 {
  background: blue;
}

.rect-3 {
  background: yellow;
}

.rect-4 {
  background: green;
}

.grid-2-small {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.circle {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: #910700;
  opacity: .4;
  transition: ease .5s;
  cursor: pointer;
}

.circle:hover {
  opacity: .7;
  transform: scale(1.05);
  text-decoration: none;
}

.active-circle {
  opacity: .9;
  transform: scale(1.25);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rect">
  <div class="rect-container">
    <div></div>
    <div>
      <div class="grid-2-small">
        <a class="circle" data-rect="rect-1"></a>
        <a class="circle" data-rect="rect-2"></a>
        <a class="circle" data-rect="rect-3"></a>
        <a class="circle" data-rect="rect-4"></a>
      </div>
    </div>
  </div>
</div>

​