Cleartimeout javascript not working

Question

由于某些原因，clearTimeout函数无法在此脚本上运行


脚本将

1） 自动播放整个youtube视频，并使用setTimeout突出显示产品菜单中的活动步骤以进入下一步。运行良好

2） 单击菜单中的某个步骤时，自动播放应停止
-步骤1:转到youtube视频的第15秒-播放到第25秒
-步骤2:转到youtube视频的第25秒-播放到第35秒
当您在菜单中单击某个步骤时，setTimeout函数仍然会运行，因此几秒钟后会调用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>

Answer 1

最简单的修复方法是用window.timer1=替换var timer1=，使timer1全局。当您取消超时时，timer1尚未设置，因为它超出了范围。在全局作用域中添加另一个变量来保持timer1值是不好的，但这是最快的解决方法。

关于代码的几件事：

1. 请不要在你的html中使用onclick，你正在使用jQuery，所以你可以使用$（"slector"）.on（"click"，…使用li的id来查看点击了什么
2. 将字符串传递给setTimeout是个坏主意，它将使用eval来确定该做什么——请参阅下面的代码如何做得更好
3. 您使用字符串形式的变量step和auto调用gotoStep，但稍后将它们与数字进行比较。这是因为您使用==而不是===。最好使用===传递数字并将数字与数字进行比较

要运行setTimeout:

window.timer1=setTimeout(function(){
  gotostep(youtube,nextstep,1);
},timeout);