3 Replies Latest reply on Jul 18, 2013 4:22 AM by AMULI

    How to reset timer?

    desziner

      Hello,

      i have a timer that counts down to zero when selected then advances the main timeline.

      I would like it to repeat this action when the button is clicked again but the timer only works once.

      Here is the code:

       

           var timerCount=4; // This is the variable set for the timer display

       

           var tCounter=setInterval(timer, 1000); //1000 will run the timer every 1 second

       

               function timer()

               {

                 timerCount=timerCount-1;

                 if (timerCount <= -1)

                 {

                sym.getComposition().getStage().getSymbol("set_1").play();

                  

                    return;

                 }

       

                 sym.getSymbol("timer_sym").$("timer_txt").html(timerCount); // Display the timer value

       

                 }

       

       

      Any suggestions?

       

      Thanks

        • 1. Re: How to reset timer?
          AMULI Level 4

          Hi desziner,

           

          The code is not sufficient. You should at least explain where it is : in your button.click event handler ?

           

          You could also make a ZIP of your project available on a service like www.box.com (where you can create a free account) and post the link.

           

          Gil

          • 2. Re: How to reset timer?
            Zaxist Level 4

            Just add this line at the end of your Code to make it works again

             

            clearInterval(tCounter);

             

            Zaxist

            • 3. Re: How to reset timer?
              AMULI Level 4

              1) You could avoid any interval by making the countdown animation in a symbol countdDown.

               

              Three states => three points in the timeline labelled wait, count and start.

               

              The stage symbol has its autoplay property set to false, so the headline stops at wait.

               

              goBtn.click event handler : sym.stop('count');

               

              The countDown symbol alos has its autoplay property set to false. A play command is inserted at count (see the arrow on white rectangle in the screen shot).

               

              At the end of the animation, in the symbol's timeline there is a trigger to start the main animation :

               

              sym.getParentSymbol().play('start');

               

              againBtn.click event handler : sym.stop('wait');

               

              countDown1.png

               

              2) With an interval, modifying the timing is just a matter of changing values in the code (in the first case you would have to edit the countdDown timeline).

               

              The structure remains, with the same three states.

               

              There is now a trigger at count in the main timeline (see the orange diamond in the screen shot). As Zaxist says, clear your interval when finished :

               

              timerCount = 5;

              sym.$("counter_txt").html( timerCount);

              tCounter = setInterval( timer, 1000);

              //------------------------------------

              function timer()

              {

                timerCount -= 1;

                if (timerCount < 1)

                {

                  sym.play('start');

                  clearInterval( tCounter);

                  return;

                }

              sym.$("counter_txt").html( timerCount);

              }

               

              countDown2.png

               

              Downloadable examples here : https://app.box.com/s/cmjmr01802p8k1tgcmhk

               

              Gil

              1 person found this helpful