javascript - 鼠标移开时停止 setInterval

Question

我正在尝试创建一个简单的悬停效果图像旋转器。它在鼠标悬停时正常​​工作，但在鼠标移出方法时不起作用。

var imgFlip = $("img").data( "flip" );
var imgOriginal = $("img").data( "original" );
var images = imgFlip.split(/,|, |;|; /);
var index = 0;

function rotateImage()
{
  $('.img-rotator').fadeOut('fast', function() 
  {
    $(this).attr('src', images[index]);

    $(this).fadeIn('fast', function() 
    {
      if (index == images.length-1)
      {
        index = 0;
      }
      else
      {
        index++;
      }
    });
  });
} 

$(document).ready(function()
{
  $('.img-rotator') 
    .mouseover(function () {
      var refreshIntervalId = setInterval (rotateImage, 1000);
    })
    .mouseout(function () {
        $(this).attr('src', imgOriginal);
   })
});

这里是 Jsfiddle 示例 - https://jsfiddle.net/wbz35L68/15/ 谢谢您的建议

Answer 1

您需要清除mouseout上的setInterval。我还修改了您的一些代码以清理内容并缓存引用。为此，您还应该使用 mouseenter 和 mouseleave。

$(document).ready(function(){
  // cache selector
  var rotator = $('.img-rotator'),
      // grab all data
      data = rotator.data(),
      // ref flip
      imgFlip = data.flip,
      // ref original
      imgOriginal = data.original,
      // get image urls
      images = imgFlip.split(/,|, |;|; /),
      // start index
      index = 0,
      // ref interval
      refreshIntervalId = null;

  function rotateImage(){
    rotator.fadeOut('fast', function(){
      $(this)
        .attr('src', images[index])
        .fadeIn('fast', function(){
          var last = index === images.length - 1;
          
          index = last ? 0 : index + 1; 
      });
    });
  } 

  rotator
    .mouseenter(function(){
      refreshIntervalId = setInterval(rotateImage, 1000);
    })
    .mouseleave(function(){
      // clear interval and set null
      clearInterval(refreshIntervalId) && (refreshIntervalId = null); 
      
      $(this).attr('src', imgOriginal);
   })
});

.container {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">
      <img class="img-rotator" data-flip="http://www.snorkl.tv/dev/loaderMax/images/bird.png, http://www.snorkl.tv/dev/loaderMax/images/whale.png" data-original="http://www.snorkl.tv/dev/loaderMax/images/crab.png" src="http://www.snorkl.tv/dev/loaderMax/images/crab.png" width="320" height="200"/>
    </div>
  </div>
</div>