javascript - Cleartimeout JavaScript が機能しない

Question

何らかの理由で、このスクリプトでclearTimeout関数が機能していません


。スクリプトは

1) YouTube ビデオ全体を自動的に再生し、setTimeout を使用して製品メニューのアクティブなステップを強調表示し、次のステップに進みます。これは正常に動作しています

2) メニューの特定のステップをクリックすると、自動再生が停止するはずです。
-ステップ 1: YouTube ビデオの 15 秒目に移動 - 25 秒目まで再生
-ステップ 2:
YouTubeビデオの 25 秒目に移動 - 35 秒目まで再生数秒間 gotostep 関数が呼び出され、ムービーが間違ったステップに進みます。

誰でもこれを確認できますか？

  <script type="text/javascript">
  $(document).ready(function(){
     gotostep('C9x4vG_6Qcs','1','1');});

 function gotostep(youtube,step,auto){
    var steparray=[15,25,35,48,58,65,79];
    var numbersteps=steparray.length-1;
    var i=1;
    var nextstep=parseInt(step)+1;
    while(i<=numbersteps){
       if(step==i){
         document.getElementById('step'+i+'').style.background='url("bg-button-active.jpg")';
         var timeout=steparray[step]*1000-steparray[step-1]*1000+3000;

         if(nextstep<=numbersteps && auto==1){
             var timer1=setTimeout('gotostep("'+youtube+'","'+nextstep+'","1")',timeout);
         }
         if(nextstep<=numbersteps && auto==0){
             clearTimeout(timer1);

         }

       }else{
         document.getElementById('step'+i+'').style.background='url("bg-button.jpg")';
       }

       i++;
     }
     var thestart=parseInt(steparray[step-1]);
     var theend=steparray[step];

     document.getElementById('productdemo-iframe').src="http://www.youtube.com/embed/"+youtube+"?autoplay=1&rel=0&start="+thestart+"&end="+theend+"";


}

HTMLコード

<div id="container">
<div id="left">
<iframe width="560" id="productdemo-iframe" height="315" src="http://www.youtube.com/embed/C9x4vG_6Qcs?rel=0&start=0" frameborder="0" allowfullscreen></iframe>

</div>
<div id="right">
<img src="logobw.jpg" alt="Logo" />
 <ul id="productdemo">
 <li><a id="step1" href="#" onclick="gotostep('C9x4vG_6Qcs','1','0');">1.&nbsp; Power button</a></li>
 <li><a id="step2" href="#" onclick="gotostep('C9x4vG_6Qcs','2','0');">2.&nbsp; Warming up</a></li>
 <li><a id="step3" href="#" onclick="gotostep('C9x4vG_6Qcs','3','0');">3.&nbsp; Insert cover</a></li>
 <li><a id="step4" href="#" onclick="gotostep('C9x4vG_6Qcs','4','0');">4.&nbsp; Cool down cover</a></li>
 <li><a id="step5" href="#" onclick="gotostep('C9x4vG_6Qcs','5','0');">5.&nbsp; Insert second cover</a></li>
 <li><a id="step6" href="#" onclick="gotostep('C9x4vG_6Qcs','6','0')">6.&nbsp; Turn off machine</a></li>
</ul>
</div>
</div>