CODEWITHSUNDEEP
javascriptjqueryhtmlcsssettimeout
daveycroqet
daveycroqet

Reputation: 2727

setTimeout with jQuery.hover() overlapping

I've got an effect I want triggered one second after page load, then subsequently every 3 seconds (on repeat). When the user hovers over an element (#hover), the effect pauses (temporarily). When they stop hovering over it, the effect resumes after 2 seconds.

I'm having a lot of trouble with overlapping sounds and animations, particularly when I hover and then unhover over the element quickly. What's wrong with my code? (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);

Upvotes: 0

Views: 407

Answers (3)

Harry Bomrah
Harry Bomrah

Reputation: 1668

copy paste this in a file and run that html file.

<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>

Upvotes: 1

Minciu
Minciu

Reputation: 96

Try adding "clearTimeout(test);" the first thing in the hoverTest function. eg:

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

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Try this: (clear the timer before starting)

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

Upvotes: 0

Related Questions