setTimeout在點擊後停止工作

Question

我正在製作一個圖像滑塊並且一切正常，但是當我點擊.button時，它會停止單獨更改圖片，我的意思是setTimeout會停止它的工作。任何人都可以幫我找出原因嗎？這裏是HTML：

<div id="container"> 
       <ul> 
        <li><img src="http://www.rollymoe.com/images/circular-pergolas-11-circular-pergola-736-x-488.jpg" /></li> 
        <li><img src="http://www.rollymoe.com/images/conex-houses-3-container-homes-for-sale-container-houses-shipping-container-houses-736-x-488.jpg" /></li> 
        <li><img src="http://www.vattihome.com/wp-content/uploads/2015/09/modern-gazebo-khodiyar-associates-residential-interiors-modern-gazebo.jpg" /></li> 
       </ul> 
       <div class="button prevButton"> 
        <span class="arrow">&lt;</span> 
       </div> 
       <div class="button nextButton"> 
        <span class="arrow">&gt;</span> 
       </div> 
      </div> 

而且，這裏是CSS：

#container{ 
width:78vw; 
height:34vw; 
position:relative; 
overflow:hidden; 
} 

#container .prevButton{ 
height:104%; 
width:10vw; 
position:absolute; 
cursor:pointer; 
z-index:2000; 
top:0; 
background: #3978C2; 
     background: -webkit-linear-gradient(left, black, rgba(0, 0, 0,  0)); 
     background: -o-linear-gradient(right, black, rgba(0, 0, 0, 0)); 
     background: -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)); 
     background: linear-gradient(to right, black, rgba(0, 0, 0, 0)); 
} 

#container .nextButton{ 
height:104%; 
width:10vw; 
position:absolute; 
cursor:pointer; 
z-index:2000; 
right:0; 
top:0; 
background: #3978C2; 
     background: -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)); 
     background: -o-linear-gradient(left, black, rgba(0, 0, 0, 0)); 
     background: -moz-linear-gradient(left, black, rgba(0, 0, 0, 0)); 
     background: linear-gradient(to left, black, rgba(0, 0, 0, 0)); 
} 


.arrow { 
font-size:7vw; 
color:white; 
position:absolute; 
top:38%; 
left:40%; 
} 

#container ul{ 
width:74.8vw; 
height:104%; 
list-style:none outside none; 
position:absolute; 
overflow:hidden; 
} 

#container li:first-child{ 
display:list-item; 
position:absolute; 
} 

#container li{ 
position:absolute; 
display:none; 
left:0; 
width:100% 
} 
#container li img { 
width:100% 
} 

，當然，在SCRIPT：

$(window).load(function(){ 
    var pages = $('#container li'), current=0; 
    var currentPage,nextPage; 
    var timeoutID; 
    var buttonClicked=0; 
    var num=100+"%", onum=-100+"%"; 

    var handler1=function(){ 
     buttonClicked=1; 
     $('#container .button').unbind('click'); 
     currentPage= pages.eq(current); 
     if($(this).hasClass('prevButton')) 
     { 
      if (current <= 0) 
       current=pages.length-1; 
      else 
       current=current-1; 
      nextPage = pages.eq(current); 

      nextPage.css("marginLeft",onum); 
      nextPage.show(); 
      nextPage.animate({ marginLeft: 0 }, 800,function(){ 
       currentPage.hide(); 
      }); 
      currentPage.animate({ marginLeft: num }, 800,function(){ 
       $('#container .button').bind('click',handler1); 
      }); 
     } 
     else 
     { 

      if (current >= pages.length-1) 
       current=0; 
      else 
       current=current+1; 
      nextPage = pages.eq(current); 

      nextPage.css("marginLeft",num); 
      nextPage.show(); 
      nextPage.animate({ marginLeft: 0 }, 800,function(){ 
      }); 
      currentPage.animate({ marginLeft: onum }, 800,function(){ 
       currentPage.hide(); 
       $('#container .button').bind('click',handler1); 
      }); 
     }  
    } 

    var handler2=function(){ 
     if (buttonClicked==0) 
     { 
     $('#container .button').unbind('click'); 
     currentPage= pages.eq(current); 
     if (current >= pages.length-1) 
      current=0; 
     else 
      current=current+1; 
     nextPage = pages.eq(current); 
     nextPage.css("marginLeft",num); 
     nextPage.show(); 
     nextPage.animate({ marginLeft: 0 }, 800,function(){ 
     }); 
     currentPage.animate({ marginLeft: onum }, 800,function(){ 
      currentPage.hide(); 
      $('#container .button').bind('click',handler1); 
     }); 
     timeoutID=setTimeout(function(){ 
      handler2(); 
     }, 4000); 
     } 
    } 

    $('#container .button').click(function(){ 
     clearTimeout(timeoutID); 
     handler1(); 
    }); 

    timeoutID=setTimeout(function(){ 
     handler2(); 
     }, 4000); 

}); 

Answer 1

我相信你還需要在handler1方法中添加以下代碼。

timeoutID=setTimeout(function(){ 
     handler2(); 
    }, 4000); 

你可以在else條件的末尾加上。