三种定时器的使用
2022-03-31 本文已影响0人
心存美好
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<meta name="author" content="">
<style>
</style>
</head>
<body>
<script>
// 定时器的另种玩法
let num = 10;
let id = setInterval(function () {
num--;
console.log('num为' + num);
if (num < 5) {
clearInterval(id)//结束这个函数的执行
}
}, 1000)
let num1 = 10;
function aa() {
num1--;
console.log('num1为', num1);
if (num1 < 5) {
return;
}
setTimeout(aa, 1000)
}
setTimeout(aa, 1000)
//浏览器提供的requestAnimationFrame函数，完美贴合浏览器的刷新频率
//定时器不能完全贴合浏览器的刷新频率，不同浏览器刷新频率也是不一样的
let num2 = 10;
function bb() {
num2--;
console.log('requestAnimationFrame的num2为', num2);
if (num2 < 5) {
return;
}
requestAnimationFrame(bb)//写动画用
}
requestAnimationFrame(bb)
</script>
</body>
</html>
