javascript - 多次悬停序列后 JQuery setInterval 不起作用

Question

我正在尝试模拟幻灯片演示文稿的页脚。这就是代码

$(function() {
        $('.presentation').on({
          mouseleave: function() {	     
			setInterval(function () {
			if(!$("input").is(":focus") && !$(".presentation:hover").length > 0 && !$('.bp-controls').hasClass('show')){		  
		       $('.bp-controls').fadeOut();	
               $('.bp-controls').removeClass('show');				   
		         }
		     }, 4000);
          },
          mouseenter: function() {
		 $('.bp-controls').fadeTo(500, 1, function() {
           // Animation complete.
		      $('.bp-controls').addClass('show');
             });	            
           }
        });
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="presentation">
         <img src="Main.png" width="50%">
         <div class="bp-controls"><input type="number" pattern="[0-9]*"></div>
        </div>

我不明白为什么 setInterval 第一次工作，也许在文档准备好后第二次工作，但后来就不再工作了。

Answer 1

您正在添加多个间隔。当你离开时，你需要清理。也应该超时，我怀疑你想继续触发它。

$('.presentation').on({
  mouseleave: function() {       
    this.timer = setTimeout(function () {}, 4000);
  },
  mouseenter: function() {
    if (this.timer) window.clearTimeout(this.timer)
  }
});