JavaScript Timing Events

最新推荐文章于 2024-07-17 15:26:15 发布

ColorPaper

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量540

点赞数

分类专栏： JavaScript 文章标签： javascript events timer button function methods

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

JavaScript Timing Events

With JavaScript, it is possible to execute some code after a specified time-interval. This is called timing events.

It's very easy to time events in JavaScript. The two key methods that are used are:

setTimeout() - executes a code some time in the future
clearTimeout() - cancels the setTimeout()

Note: The setTimeout() and clearTimeout() are both methods of the HTML DOM Window object.

The setTimeout() Method

Syntax

var t=setTimeout("javascript statement",milliseconds);

The setTimeout() method returns a value. In the syntax defined above, the value is stored in a variable called t. If you want to cancel the setTimeout() function, you can refer to it using the variable name.

The first parameter of setTimeout() can be a string of executable code, or a call to a function.

The second parameter indicates how many milliseconds from now you want to execute the first parameter.

Note: There are 1000 milliseconds in one second.

Example

When the button is clicked in the example below, an alert box will be displayed after 3 seconds.

Example

<html>
<head>
<script type="text/javascript">
function timeMsg()
{
var t=setTimeout("alertMsg()",3000);
}
function alertMsg()
{
alert("Hello");
}
</script>
</head>

<body>
<form>
<input type="button" value="Display alert box in 3 seconds"
οnclick="timeMsg()" />
</form>
</body>
</html>

Try it yourself »

Example - Infinite Loop

To get a timer to work in an infinite loop, we must write a function that calls itself.

In the example below, when a button is clicked, the input field will start to count (for ever), starting at 0.

Notice that we also have a function that checks if the timer is already running, to avoid creating additional timers, if the button is pressed more than once:

Example

<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}
</script> 
</head>

<body>
<form>
<input type="button" value="Start count!" οnclick="doTimer()">
<input type="text" id="txt" />
</form>
</body>
</html>

Try it yourself »

The clearTimeout() Method

Syntax

clearTimeout(setTimeout_variable)

Example

The example below is the same as the "Infinite Loop" example above. The only difference is that we have now added a "Stop Count!" button that stops the timer:

Example

<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}

function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" οnclick="doTimer()">
<input type="text" id="txt">
<input type="button" value="Stop count!" οnclick="stopCount()">
</form>
</body>
</html>

ColorPaper

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript Timing Events

JavaScript Timing EventsJavaScript Timing EventsWith JavaScript, it is possible to execute some code after a specified time-interval. This i
复制链接

扫一扫