Question

37

timer using javascript

rated 0 times [ 41] [ 4] / answers: 1 / hits: 18164 / 13 Years ago, thu, february 23, 2012, 12:00:00

I want implement timer using java script.I want to decrement timer with variation of interval.

Example.Suppose my timer starts at 500 .

I want decrement timer depending on the level such as

1. 1st level timer should decrement by 1 also decrement speed should be slow.

2.2nd level timer should decrement by 2 and decrement speed should be medium

3.3rd level timer should decrement by 3 and decrement speed should be fast

I can create timer using following code:

<script type=text/javascript>

var Timer;

var TotalSeconds;

function CreateTimer(TimerID, Time) 

{

    TotalSeconds=Time;

    Timer = document.getElementById(TimerID);

    TotalSeconds = Time;

    UpdateTimer();

    setTimeout(Tick(), 1000);

}



function Tick() {

    TotalSeconds -= 10;

    if (TotalSeconds>=1)

    {

        UpdateTimer();

        setTimeout(Tick(), 1000);

    }

    else

    {   

        alert( Time out );

        TotalSeconds=1;

        Timer.innerHTML = 1;

    }

}

But i call this CreateTimer() function many times so its speed is not controlling because i call it many times.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tristab

Add To Favorites

Follow

Total Points: 735

Total Questions: 106

Total Answers: 96

Location: Grenada

Member since Sun, Dec 20, 2020

4 Years ago

tristab questions

1 How to use the new Webpack devServer configuration?

Sat, Sep 25, 21, 00:00, 3 Years ago

1 Discord.JS get member from user ID

Sun, Jan 31, 21, 00:00, 3 Years ago

1 React: Passing Props not working. What am I missing?

Wed, Dec 2, 20, 00:00, 4 Years ago

1 How can i extract vowels in a Javascript String?

Fri, Oct 23, 20, 00:00, 4 Years ago

1 Jest encountered an unexpected token when testing a Vue single file component

Sat, May 23, 20, 00:00, 4 Years ago

View All

answered 13 Years ago hector · Accepted Answer

Couple of points:

You've used all global variables, it's better to keep them private so other functions don't mess with them

Function names starting with a captial letter are, by convention, reserved for constructors

The function assigned to setTimeout doesn't have any public variables or functions to modify the speed while it's running so you can only use global variables to control the speed. That's OK if you don't care about others messing with them, but better to keep them private

The code for UpdateTimer hasn't been included

Instead of passing a string to setTimeout, pass a function reference: setTimeout(Tick, 1000);

Anyhow, if you want a simple timer that you can change the speed of:

<script>



var timer = (function() {

    var basePeriod = 1000;

    var currentSpeed = 1;

    var timerElement;

    var timeoutRef;

    var count = 0;



    return {

      start : function(speed, id) {

        if (speed >= 0) {

          currentSpeed = speed;

        }

        if (id) {

          timerElement = document.getElementById(id);

        }

        timer.run();

      },



      run: function() {

        if (timeoutRef) clearInterval(timeoutRef);

        if (timerElement) {

          timerElement.innerHTML = count;

        }

        if (currentSpeed) {

          timeoutRef = setTimeout(timer.run, basePeriod/currentSpeed);

        }

        ++count;

      },



      setSpeed: function(speed) {

        currentSpeed = +speed;

        timer.run();

      }

    }



}());



window.onload = function(){timer.start(10, 'timer');};



</script>



<div id=timer></div>

<input id=i0>

<button onclick=

  timer.setSpeed(document.getElementById('i0').value);

>Set new speed</button>

It keeps all its variables in closures so only the function can modify them. You can pause it by setting a speed of zero.