jQuery滑块 - 意外行为

Question

我写了一个小的'新闻速递'。我应该通过spans进行循环，每5秒进行一次fadeIn/fadeOut。

虽然未触及，但它运行良好，但是当您尝试玩箭（例如向前跳5次）时，脚本会发疯使fadeIn/fadeOut不动。

Live example here.

脚本：

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

    }); 

与固定大加赞赏问题的任何帮助。

Answer 1

I tried it here 我宣布一个标志，携带淡入已经完成与否，这样我们就可以永远不会触发事件太多时间......

Answer 2

我编辑你的代码。你可以看到它现场here。这完全是关于阻止标志不允许你多次运行相同的代码。我想，为了更好的控制，我还包装了setTimeout和clearTimeout的管理。