JavaScript - 定时器

目录

JavaScript 计时事件

setInterval() 方法：间隔指定的毫秒数不停地执行指定的代码

clearInterval() 方法：停止 setInterval() 方法执行的函数代码。

setTimeout() 方法：在指定的毫秒数后执行指定代码。

clearTimeout() 方法：停止执行setTimeout()方法的函数代码。

清除定时器（clearInterval、clearTimeout）

---

JavaScript 计时事件

概念：在一个设定的时间间隔之后来执行代码，称之为计时事件。

两个关键方法:

• setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
• setTimeout() - 在指定的毫秒数后执行指定代码。

setInterval() 方法：间隔指定的毫秒数不停地执行指定的代码

// 持续性定时器
/*异步执行
	setInterval(函数, 毫秒数, 函数所需参数(可以省略));
*/

//每三秒弹框，hello
setInterval(function(){alert("Hello")},3000);

setTimeout(function (data) {
		console.log(data);
	}, 1000, "数据");

clearInterval() 方法：停止 setInterval() 方法执行的函数代码。

<button onclick="myStopFunction()">停止</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
	var d=new Date();
	var t=d.toLocaleTimeString();
	document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
	clearInterval(myVar);
}
</script>

setTimeout() 方法：在指定的毫秒数后执行指定代码。

// 一次性定时器
// 1.语法 2.参数列表 3.同步异步

/* 异步执行
	setTimeout(函数, 毫秒数, 函数所需参数(可以省略));
*/


setTimeout(function (data) {
	console.log(data);
}, 1000, "数据");

setTimeout(function(){alert("Hello")},3000);

clearTimeout() 方法：停止执行setTimeout()方法的函数代码。

var myVar;
function myFunction(){
	myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
	clearTimeout(myVar);
}

清除定时器（clearInterval、clearTimeout）

注意：

• 持续性与一次性定时器通常都应该有清除定时器操作
• 清除定时器操作可以混用 clearTimeout() | clearInterval()
• 定时器的返回值就是定时器编号,就是普普通通的数字类型
• 循环清除所有定时器中，可以重复清除，允许清除不存在的定时器编号

document.onclick = function () {
	console.log("定时器清除了");
	clearInterval(timer);
	// clearTimeout(timer);
}

// 清除所有定时器
// 如果上方创建过n个定时器,那么timeout值为n+1
var timeout = setTimeout(function(){}, 1);
for (var i = 0; i < timeout; i++) {
	// 循环将编号[0, n]所有定时器都清除一次
	clearTimeout(i)
}