Curseur jQuery - comportement inattendu

Question

J'ai écrit un petit 'Ticker News'. Je devrais faire une boucle à travers le spans, rendant fadeIn/fadeOut toutes les 5s.

Lorsqu'elle est intacte, elle fonctionne correctement, mais lorsque vous essayez de jouer avec les flèches (par exemple, la flèche de lecture 5 fois), le script devient fou en faisant fadeIn/fadeOut constamment.

Live example here.

Script:

 (function($) { 

     $.fn.NoticeBoard = function() { 


      // Set a timeout 
      var timeOut = setTimeout(nextNotice, 5000); 

      // pause on hover 
      $('.noticeboard').hover(

      function() { 
       clearTimeout(timeOut); 
      }, function() { 
       timeOut = setTimeout(nextNotice, 5000); 
      }); 

      // Next notice function called on timeout or click 

      function nextNotice(event) { 
       clearTimeout(timeOut); 
       timeOut = setTimeout(nextNotice, 5000); 

       if ($('.noticeboard span:visible').is('.noticeboard span:last-child')) { 
        $('.noticeboard span:visible').fadeOut(300); 
        $('.noticeboard span:first-child').fadeIn(); 
       } 
       else { 
        $('.noticeboard span:visible').fadeOut(300).next().fadeIn(); 
       } 
       return false; 
      } 

      $('#notice-next').click(nextNotice); 
      $('#notice-prev').click(function(event) { 


       if ($('.noticeboard span:visible').is('.noticeboard span:first-child')) { 
        $('.noticeboard span:visible').fadeOut(300); 
        $('.noticeboard span:last-child').fadeIn(); 
       } 
       else { 
        $('.noticeboard span:visible').fadeOut(300).prev().fadeIn(); 
       } 
       return false; 

      }); 

     }; 

    /*! 
    ---------------------------------------------*/ 

    })(jQuery); 

    /*! OnLoad 
    ---------------------------------------------*/ 
    $(document).ready(function() { 

     $('.noticeboard span').hide(); 
     $('.noticeboard span:first').show(); 
     $('.noticeboard').NoticeBoard(); 

    }); 

Toute aide à la résolution du problème très apprécié.

Answer 1

I tried it here Je déclare un drapeau pour porter le fadeIn est déjà fait ou non, de sorte que nous ne pouvons jamais tirer l'événement fois trop ...

Answer 2

Je modifié votre code. Vous pouvez le voir en direct here. Il s'agit de bloquer le drapeau qui ne vous permet pas d'exécuter le même code trop de fois. Et j'ai enveloppé la gestion de setTimeout et clearTimeout pour un meilleur contrôle je pense.