暂停和恢复设置间隔取决于鼠标位置

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>