Java定时器简介
JavaScript定时器:
称之为“计时器”
用于在指定的时间后运行某些任务,JS定时器耗时我们生活中的闹钟。
JavaScript中提供两种方式来设置定时器
分别是setTimeout()和setInterval()
JavaScript中定时器生成的方法
| 方法 | 备注 |
| setTimeout() | 在指定的时间后(单位为毫秒) 执行某些代码，代码只会执行一次 |
| setInterval() | 按照指定的周期(单位为毫秒)来重复执行某些代码，定时器不会自动停止，除非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口 |
setTimeout()简介
JS setTimeout()函数
用于在指定时间后执行某些代码
代码只会运行一次
JS setTimeout()函数语法格式如下
setTimeout(function[, delay, arg1, arg2, ...]);
setTimeout(function[, delay]);
setTimeout(code[, delay]);
参数说明如下：
function:
一个函数(通常使用匿名函数)
其中定义了定时器中要执行的代码
code:
字符串类型的代码
这些代码会在定时器到期后被编译执行
出于安全考虑不建议使用；
delay:
可选参数，定时器在执行的其中代码之前,
要等待的时间
单位为毫秒(1秒 = 1000毫秒),
如果省略此参数,则表示立即执行；
arg1、arg2、...、argN：要传递给函数的参数
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linux28.com -- JavaScript</title>
</head>
<body>
<script type="text/javascript">
var myTest = function (str = 'JavaScript'){
document.write(str + "<br>");
};
setTimeout(myTest, 500, 'Hello');
setTimeout(myTest, 1000);
setTimeout(function(){
document.write("定时器<br>");
}, 1500)
setTimeout("document.write(\"setTimeout()\")", 2000);
</script>
</body>
</html>
setInterval()
JS setInterval()函数:
可定义一个能够重复执行的定时器
每次执行需要等待指定的时间间隔
JS setInterval() 函数的语法格式如下
setInterval(function, delay, [arg1, arg2, ...]);
setInterval(code, delay);
参数说明如下：
function:
一个函数(通常使用匿名函数)
其中定义了定时器中要执行的代码；
code：
字符串类型的代码
这些代码会在定时器到期后被编译执行
出于安全考虑不建议使用；
delay:
可选参数
定时器在执行的其中代码之前
要等待的时间
单位为毫秒(1秒 = 1000毫秒)
如果省略此参数
则表示立即执行；
arg1、arg2、...、argN:
要传递给函数的参数
注意事项:
使用setInterval() 函数定义的定时器不会自动停止
除非调用clearInterval()函数来手动停止或关闭浏览器窗口
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<p id="one"></p>
<p id="two"></p>
<script type="text/javascript">
var num = 1;
var myTest = function (){
document.getElementById('one').innerHTML += num + " ";
num ++;
};
setInterval(myTest, 500);
setInterval(function(){
var d = new Date();
document.getElementById('two').innerHTML = d.toLocaleTimeString();
}, 1000);
</script>
</body>
</html>
JS 取消定时器
当使用setTimeout()或setInterval()
设置定时器时
这两个方法都会产生一个定时器的唯一ID
ID为一个正整数值
也被称为“定时器标识符”
使用这个ID
我们可以清除ID所对应的定时器
可以使用clearTimeout()或clearInterval()函数
来分别清除由setTimeout()或setInterval()函数创建的定时器
调用clearTimeout()或clearInterval()函数需要提供定时器的唯一ID 作为参数
例:清除定时器的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linux28.com JavaScript</title>
</head>
<body>
<p>当前时间为：<span id="clock"></span></p>
<button onclick="stopClock(this);">停止</button><hr>
<button onclick="delayedAlert(this);">2秒后弹出一个提示框</button>
<button onclick="clearAlert();">取消</button>
<script type="text/javascript">
var intervalID;
function showTime() {
var d = new Date();
document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
function stopClock(e) {
clearInterval(intervalID);
e.setAttribute('disabled', true)
}
intervalID = setInterval(showTime, 1000);
var timeoutID;
var that;
function delayedAlert(e) {
that = e;
timeoutID = setTimeout(showAlert, 2000);
e.setAttribute('disabled', true)
}
function showAlert() {
alert('这是一个提示框。');
that.removeAttribute('disabled');
}
function clearAlert() {
clearTimeout(timeoutID);
that.removeAttribute('disabled');
}
</script>
</body>
</html>
