Question

我有一个效果，我希望在页面加载后触发一秒，然后每隔3秒（重复一次）。当用户将鼠标悬停在某个元素上时（ #hover ），效果会暂停（暂时）。当它们停止悬停在它上面时，效果会在2秒后恢复。

我在重叠声音和动画方面遇到了很多麻烦，特别是当我将鼠标悬停然后快速移出元素时。我的代码出了什么问题？（Fiddle）

var test;
function hoverTest(arg) {
  if (arg == 'stop') {
    clearTimeout(test);
  }
  if (arg == 'start') {
    playSound();
    $('#hover').transition({
      opacity: 0,
      duration: 1000,
      complete: function() {
        $('#hover').transition({
          opacity: 1,
          duration: 1000,
          complete: function() {
            test = setTimeout(function() { hoverTest('start'); }, 3000);
          }
        });
      }
    });
  }
}

$('#hover').hover(function() {
  hoverTest('stop');
}, function() {
  setTimeout(function() {
    hoverTest('start');
  }, 2000);
});

function playSound() {
  var sound = new Audio('sound.mp3');
  sound.play();
}

setTimeout(function() {
  hoverTest('start');
}, 1000);

Answer 1

将其粘贴到文件中并运行该html文件。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
    #hover {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div id="hover"></div>

<script type="text/javascript">
var interval = null;
var hoverTest = function(method){
    playSound();
    $("#hover").fadeOut(1000, function() {
        $(this).fadeIn(1000);
    });

}
var playSound =function() {
    var sound = new Audio('http://www.sounddogs.com/previews/25/mp3/306470_SOUNDDOGS__an.mp3');
    sound.play();
}

$(document).ready(function(){
    interval = setInterval('hoverTest()',3000);
    $("#hover").mouseenter(function(){
        clearInterval(interval);
    }).mouseleave(function(){
        interval = setInterval('hoverTest()',3000);
    })
})

</script>

Answer 2

尝试添加“clearTimeout（test）;” hoverTest函数中的第一件事。例如：

var test;
function hoverTest(arg) {
  clearTimeout(test);
  if (arg == 'stop') {
    clearTimeout(test);
  }
  if (arg == 'start') {
    playSound();
    $('#hover').transition({
      opacity: 0,
      duration: 1000,
      complete: function() {
        $('#hover').transition({
          opacity: 1,
          duration: 1000,
          complete: function() {
            test = setTimeout(function() { hoverTest('start'); }, 3000);
          }
        });
      }
    });
  }
}

Answer 3

试试这个:(开始前清除计时器）

$('#hover').hover(function() {
  hoverTest('stop');
}, function() {
  clearTimeout(test);
  setTimeout(function() {
    hoverTest('start');
  }, 2000);
});

setTimeout与jQuery.hover（）重叠

3 个答案: