定时器使用JavaScript [英] timer using javascript

问题描述

我想使用java脚本来实现定时器，我想用间隔的变化来减少定时器的运行。

例子。假设我的定时器从500开始。

我希望递减计时器取决于等级如
1.第一级计时器应该递减1，递减速度应该是缓慢的。

2.2nd级别计时器应该递减2，递减速度应该是中等
的。
3.3rd级别的计时器应该递减3，并且递减速度应该是快的

我可以使用以下代码创建计时器：

 < script type =text / javascript> 
 var Timer; 
 var TotalSeconds; 
函数CreateTimer（TimerID，Time）
 {
 TotalSeconds = Time; 
 Timer = document.getElementById（TimerID）; 
 TotalSeconds = Time; 
 UpdateTimer（）; 
 setTimeout（Tick（），1000）; 
} 
 
函数Tick（）{
 TotalSeconds  -  = 10; 
 if（TotalSeconds> = 1）
 {
 UpdateTimer（）; 
 setTimeout（Tick（），1000）; 
} 
 else 
 {
 alert（Time out）; 
 TotalSeconds = 1; 
 Timer.innerHTML = 1; 
 
 
 $ / code $ / pre 
 
但是我多次调用这个CreateTimer（）函数它的速度没有控制，因为我多次调用它。
解决方案
几个要点：$ b​​ 
 $ b 
 
 
您已经使用了所有全局变量，所以最好让它们保持私有状态，以便其他函数不会混淆它们。
 
函数名称开始根据约定，保留给构造函数
 
 
分配给setTimeout的函数在运行时没有任何公共变量或函数来修改速度，所以您只能使用全局变量变量来控制速度。如果你不关心其他人与他们混淆，但更好地保持他们私密
 
 
  UpdateTimer 的代码hasn' 
 
而不是将一个字符串传递给setTimeout，传递一个函数引用： setTimeout（Tick，1000）;  
 
 
无论如何，如果您想要一个简单的计时器，您可以改变速度： 
 
 
 <脚本> 
 $ b 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（）; 
}，
 
运行：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）; 
>设置新速度< / button> 
  
它将所有变量保留在闭包中，因此只有函数可以修改它们。您可以通过将速度设置为零来暂停它。
 
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.
解决方案
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.

                        
这篇关于定时器使用JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！