clearTimeout on Mouseover Événement ne pas effacer setTimeout de l'événement Mouseout

Question

J'ai du code qui ajoute des événements mouseover et des événements mouseout à tous les balises 'a' sur une page. Je voudrais qu'il sorte que le mouseout commence une minuterie de 5 secondes après quoi il appelle une fonction. Cependant, si un nouvel événement mouseover se déclenche, il doit annuler tous les temporisateurs existants. Le code que j'utilise suit. Le setTimeout() fonctionne bien, mais il semble que le clearTimeout() ne référence pas le bon timeoutID, même si je l'ai déclaré globalement. Aucune suggestion?

var timeoutID; 

function addMouseoverEvent() { 
    $('a').each(function(index) { 
     $(this).mouseover(function() { 
      clearTimeout(timeoutID); 
      // do stuff 
     }) 
    }); 
} 

function addMouseoutEvent() { 
    $('a').each(function(index) { 
     $(this).mouseout(function() { 
      timeoutID = setTimeout(function() { 
       // do stuff 
      }, 5000); 
     }) 
    }); 
} 

$(window).load(function() { 
    addMouseoverEvent(); 
    addMouseoutEvent(); 
}); 

Je devrais préciser qu'il ne devrait y avoir qu'une seule minuterie active. C'est pourquoi je voulais que ce soit global. Si un événement mouseover se produit, aucune minuterie ne doit rester. Et si un événement mouseout survient, un seul timer devrait être actif - celui déclenché par le dernier événement mouseout.

Answer 1

Si votre timeoutId est globall alors il va être écrasé à chaque itération de $('a').each(). Si vous utilisez 1.4, vous pouvez utiliser la méthode delay la plus probable. ou vous pouvez stocker le timeoutId sur l'élément avec $ (this) .data ('timeoutId', setTimeout (youFunction) `.

Answer 2

Je sais qu'il a déjà été répondu, mais j'ai trouvé que simplement supprimer l'appel .each() fait apparaître .. fonctionne comme prévu Essayez le petit jeu de vol stationnaire sur this Fiddle

(function game() { 
    var timeoutID; 
    $('a').mouseover(function() { 
     $('#box').html('All is well.').removeClass('bang'); 
     clearTimeout(timeoutID); 
     // do stuff 
    }); 
    $('a').mouseout(function() { 
     $('#box').html('You have 2 seconds to return!'); 
     timeoutID = setTimeout(function() { 
      $('#box').addClass('bang').html('Too Late!'); 
      // do stuff 
     }, 2000); 
    }); 
}()); 

Il est très possible que je me manque quelque chose - mais le jeu de vol stationnaire semble fonctionner très bien