提问者:小点点

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


我有这些泡泡,这些泡泡与它们背后的背景相联系。 每个气泡与不同的背景相关联,例如,如果第一个气泡是活动气泡,则背景为红色,如果第二个气泡是活动气泡,则背景变为蓝色,以此类推。 要使一个气泡活跃,你只需悬停在它上面。 另一种改变哪个气泡活跃的方法是什么也不做,每隔5秒,下一个气泡就会活跃起来。

一切都运行良好,正如预期的那样,但有一个微小的bug。

如果你悬停在一个气泡上,这将使气泡活跃,但如果你最终保持鼠标在那里(5秒后),活跃的气泡将成为下一个气泡,尽管鼠标在原来的气泡上。 问题是--当用户将鼠标放在任何圆圈上时,是否有一种方法可以暂停setInterval函数,而一旦鼠标不在任何气泡上,setInterval函数就可以恢复?

null

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>

null


共2个答案

匿名用户

如果其中一个圆圈当前处于活动状态,则可以签入间隔处理程序。 通过使用.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)
})
...

匿名用户

您可以使用ClearInterval下面是一个工作示例jsfiddle

null

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>