Question

由于某种原因， clearTimeout 功能不适用于此脚本

脚本将

1）使用setTimeout自动播放整个YouTube视频并突出显示产品菜单中的活动步骤，以继续下一步。这工作正常

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 CODE

<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

最简单的解决方法是将var timer1=替换为window.timer1=以使timer1成为全局。取消超时时，尚未设置timer1，因为它已超出范围。在全局范围内添加另一个变量只是为了保存timer1值是不好的，但这是最快的修复。

关于代码的一些事情：

请不要在你的html中使用onclick，你正在使用jQuery，所以你可以使用$（“slector”）。on（“click”，...使用li的id来查看被点击的内容。
将字符串传递给setTimeout是一个坏主意，它将使用eval来确定要做什么，请参阅下面的代码，以便更好地做到这一点。
您可以使用变量step和auto作为字符串调用gotoStep，但稍后将它们与数字进行比较。这是有效的，因为您使用的是==而不是===。最好使用===

运行setTimeout：

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

Cleartimeout javascript无法正常工作

1 个答案: