悬停时清除间隔不起作用

Question

我遵循我得到的关于 clearinterval 的所有答案，它与其他人的工作方式完全相同。不确定我做错了什么。我只想让幻灯片在悬停到 div 时停止。我什至将光标：指针放入 div，但似乎这没有帮助。

var myVar = window.setInterval(yanslider, 7000);
  
  function yanslider(){
    $('.slider-inner > div:first')
      .fadeOut(1000)
      .removeClass('active')
      .next()
      .fadeIn(1000)
      .addClass('active')
      .end()
      .appendTo('.slider-inner');
  }

  $( ".slider-inner" ).hover(function() {
      // onmouseover
      window.clearInterval(myVar);
      // onmouseout
      yanslider();
  });

.slider-inner{
 width:200px;
 height:200px;
 position:relative;
 overflow:hidden;
 border:#666 solid 1px;
}

.slider-inner > div{
 display:none;
 width:200px;
 height:200px;
}

.slider-inner .active{
 display:inline-block;
 cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-inner">
          <div id="item" class="active"><p>#1</p></div>
          <div id="item" ><p>#2</p></div>
          <div id="item" ><p>#3</p></div>
        </div>

Answer 1

一种方法是使用超时，而不是间隔。

yanslider可以创建执行动作的超时，递归调用自身创建逻辑循环
在页面加载时，调用 yanslider() 开始循环
将鼠标悬停在滑块上时，取消超时
当您将鼠标悬停在滑块外时，再次调用该函数以恢复逻辑循环

var sliderTimeout;

function yanslider () {
  //start a timeout for seven seconds later
  sliderTimeout = setTimeout(function(){
    $('.slider-inner > div:first')
        .fadeOut(1000)
        .removeClass('active')
        .next()
        .fadeIn(1000)
        .addClass('active')
        .end()
        .appendTo('.slider-inner');
        
        yanslider(); // recursive loop
  }, 2000);
}

$( ".slider-inner" ).hover(
  function () { // onmouseover
    clearInterval( sliderTimeout ); // terminate the timeout
  },
  function () { // onmouseout
    yanslider(); // start the loop again
  }
);

yanslider(); // start the loop on page load

.slider-inner{
 width:200px;
 height:200px;
 position:relative;
 overflow:hidden;
 border:#666 solid 1px;
}

.slider-inner > div{
 display:none;
 width:200px;
 height:200px;
}

.slider-inner .active{
 display:inline-block;
 cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-inner">
          <div id="item" class="active"><p>#1</p></div>
          <div id="item" ><p>#2</p></div>
          <div id="item" ><p>#3</p></div>
        </div>

悬停时清除间隔不起作用

clearinterval not working when hover over

javascript

clearinterval