单击时停止函数循环

Question

我有一个循环来添加/删除.masterdiv上的类：

function loopSlide(){
setTimeout(function(){ $(".master").addClass("one") }, 0);
setTimeout(function(){ $(".master").removeClass("one") }, 2000);
setTimeout(function(){ $(".master").addClass("two") }, 2000);
setTimeout(function(){ $(".master").removeClass("two") }, 4000);
setTimeout(function(){ $(".master").addClass("three") }, 4000);
setTimeout(function(){ $(".master").removeClass("three") }, 6000);
setTimeout(loopSlide, 6000);
}

loopSlide()

.master div {
display: none;
}
.master.one div:nth-child(1) {
display: block;
}
.master.two div:nth-child(2) {
display: block;
}
.master.three div:nth-child(3) {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="master">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

现在我正在寻找一种方法，如何通过单击其中一个div (1、2、3( 来停止循环。

小提琴

Answer 1

您可以尝试以下逻辑，其中可以保留类一，二和三，并且在单击需要清除保存在变量中的间隔的div时也可以停止循环

$(document).ready(function(){
var $master = $('.master');
var $div = $('.master div');
var $currentDiv = $('.master div:first');
$currentDiv.addClass('one');
var interval = setInterval(function(){
var $next = $currentDiv.next();
$master.removeClass('one two three');
if($next.length>0) {
$currentDiv = $next;
} else {
$currentDiv = $('.master div:first');
}
var index = $currentDiv.index();
if(index == 0) {
$master.addClass('one');
} else if(index == 1) {
$master.addClass('two');
} else if(index ==2) {
$master.addClass('three');
}
}, 2000);

$div.on('click', function(){
clearInterval(interval);

});

});

.master div {
display: none;
}
.master.one div:nth-child(1) {
display: block;
}
.master.two div:nth-child(2) {
display: block;
}
.master.three div:nth-child(3) {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="master">
<div >1</div>
<div>2</div>
<div>3</div>
</div>

Answer 2

reference = setTimeout()返回一个值，该值允许您通过clearTimeout( reference )"取消"setTimeout 的函数执行

存储setTimeout()返回的值，然后单击<div>清除超时

$('.master').on('click', function(evt) { clearTimeout( reference ); } );

---

另一种方法是在循环是否继续时存储在变量中。 当用户单击时更改变量。在setTimeout()之前检查变量

var proceed = true;
$('.master').on('click', proceed=false; } );

。

if( proceed ) setTimeout(...

整个事情变成了

var proceed = true;
loopSlide();
function loopSlide(){
setTimeout(function(){ $(".master").addClass("one") }, 0);
setTimeout(function(){ $(".master").removeClass("one") }, 2000);
setTimeout(function(){ $(".master").addClass("two") }, 2000);
setTimeout(function(){ $(".master").removeClass("two") }, 4000);
setTimeout(function(){ $(".master").addClass("three") }, 4000);
setTimeout(function(){ $(".master").removeClass("three") }, 6000);
if( proceed )
{
setTimeout(loopSlide, 6000);
}
}
$('.master div').click(function (){
proceed=false;
});

小提琴