本文将介绍定时器 setTimeout 的三种调用方式,会介绍取消定时器 clearTimeout ,会介绍循环定时器 setInterval 以及取消循环定时器 clearInterval
1. 定时器:setInterval
//1. setTimeout("JS语句",在多少毫秒数后调用JS语句)
setTimeout("console.log('hhhh')", 1000);
//setTimeout(函数,在多少毫秒数后调用该函数)
setTimeout(function () {
console.log("ahhahhahahh");
}, 2000);
//setTimeout(函数名,在多少毫秒数后调用该函数)
setTimeout(say, 3000);
function say() {
console.log(345678);
}
2. 取消定时器:clearTimeout
//取消定时器clearTimeout,在定时器没执行之前取消定时器
var fp = setTimeout("console.log('你好');", 1000);
clearTimeout(fp);
3. 循环定时器:setInterval
//循环定时器setInterval
var fp2 = setInterval(function () {
console.log("啊哈哈哈哈哈哈哈");
}, 1000);
4. 取消循环定时器:clearInterval
<button id="stop">取消循环</button>
//取消循环定时器clearInterval
document.getElementById("stop").onclick = function () {
clearInterval(fp2)
}
5. 页面倒计时:
<span style="color: red;" id="_time"></span>
<input type="button" value="开始时间" onclick="_starttime()">
<input type="button" value="停止时间" onclick="_stoptime()">
var interval_id = window.setInterval("_setTime()", 1000);
//若不加windows.onload 方法,在页面中不能显示时间
window.onload = function () {
var _time = document.getElementById("_time");
var date = new Date();
_time.innerHTML = date.toLocaleString();
}
//若注释掉这个方法,控制台会报这个错误:_setTime is not defined
function _setTime() {
var _time = document.getElementById("_time");
var date = new Date();
_time.innerHTML = date.toLocaleString();
}
//单击事件
function _starttime() {
interval_id = window.setInterval("_setTime()", 1000);
}
//单击事件
function _stoptime() {
window.clearInterval(interval_id);
}