定时器
一 概念
- setInterval
- setTimeout
二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
</body>
<script type="text/javascript">
// 应用场景
// 1.完成js自启(不需要手动触发)动画
// 2.css完成不了的动画
// 一次性定时器
// 1.语法 2.参数列表 3.同步异步
/* 异步执行
setTimeout(函数, 毫秒数, 函数所需参数(可以省略));
*/
console.log("开始");
setTimeout(function (data) {
console.log(data);
}, 1000, "数据");
console.log("结束");
// 持续性定时器
/*异步执行
setInterval(函数, 毫秒数, 函数所需参数(可以省略));
*/
console.log("又开始");
var timer = setInterval(function() {
console.log("呵呵");
}, 1000)
console.log(timer);
console.log("又结束");
// 清除定时器
// 1.持续性与一次性定时器通常都应该有清除定时器操作
// 2.清除定时器操作可以混用 clearTimeout() | clearInterval()
// 3.定时器的返回值就是定时器编号,就是普普通通的数字类型
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)
}
// 1.允许重复清除
// 2.允许清除不存在的定时器编号
</script>
</html>
