CODEWITHSUNDEEP
javascripttimeoutsettimeout
Michael V
Michael V

Reputation: 59

Cleartimeout javascript not working

For some reason the clearTimeout function is not working on this script


The script will

1) Automatically play the whole youtube video and highlight the active step in the product menu using setTimeout to proceed to the next step. This is working fine

2) When clicking on a certain step in the menu, the autoplay should stop.
- Step 1 : Go to second 15 of youtube video - play until second 25
- Step 2 : Go to second 25 of youtube video - play until second 35
When you click in the menu on a certain step the setTimeout function still runs so after a few seconds the gotostep function is called and the movie proceeds on the wrong step.

Please can anyone check this?

  <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>

Upvotes: 1

Views: 1064

Answers (1)

HMR
HMR

Reputation: 39250

The simplest fix would be to replace var timer1= with window.timer1= to make timer1 global. When you cancel the timeout the timer1 hasn't been set because it has gone out of scope. It's bad to add another variable on global scope just to hold the timer1 value but it's the quickest fix.

A couple of things about the code:

  1. Please do not use onclick in your html, you are using jQuery so you can use $("slector").on("click",... Use the id of the li to see what was clicked.
  2. passing string to setTimeout is a bad idea, it'll use eval to figure out what to do see code below how to do this better.
  3. You call your gotoStep with variables step and auto as strings but later you compare them with numbers. This works because you use == instead of ===. Better to pass numbers and compare numbers with numbers using ===

To run the setTimeout:

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

Upvotes: 1

Related Questions