Question

我有一个循环在.master div上添加/删除类：

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）之一来停止循环。

Fiddle

Answer 1

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;
});

fiddle

Answer 2

您可以尝试下面的逻辑，在其中您可以保留第一，第二和第三类，并在单击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>

点击时停止功能循环

2 个答案: