On every mouseleave you bind the function again by calling this.rotateSwitch()
. Instead, only start the interval again:
rotateSwitch: function() {
var myTimer,
that = this;
function start() {
myTimer = setInterval(that.autoRotate.bind(that), 5000);
}
function stop() {
clearInterval(myTimer);
}
$('.hero img').hover(stop, start);
start();
},
If that function is called multiple times, you might want to restrict your .hero img
selector to a specific context as well.