<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input {
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<input type="button" value="循环定时器" id="one">
<input type="button" value="一次性定时器" id="two">
<input type="button" value="循环定时器停止" id="oneStop">
<input type="button" value="一次性定时器停止" id="twoStop">
<script>
var idInterval;
var timeId;
// 循环定时器
document.getElementById("one").onclick = function () {
idInterval = window.setInterval(function () {
console.log('循环定时器');
}, 100);
};
// 循环定时器停止
document.getElementById("oneStop").onclick = function () {
window.clearInterval(idInterval);
console.log("循环定时器停止");
};
//一次性定时器在页面加载完毕时启动
document.getElementById("two").onclick = function () {
timeId = window.setTimeout(function () {
console.log("一次性定时器开启");
}, 1000);
};
// 循环定时器停止
document.getElementById("twoStop").onclick = function () {
window.clearTimeout(timeId);
console.log("一次性定时器停止");
};
</script>
</body>
</html>