背景
在了解宏任务的时候了解到requestAnimationFrame，cancelAnimationFrame，然后做了实践。
方法
-
requestAnimationFrame（callback）
即屏幕刷新率，执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画，回调函数执行次数通常是每秒60次。
-
cancelAnimationFrame
取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.content {
width: 100%;
}
.progress {
width: 0;
height: 20px;
background-color: aqua;
border-radius: 10%;
}
.stop,
.reset {
width: 150px;
outline: none;
height: 40px;
}
.stop {
background: #ff0;
}
.reset {
background: #654565;
}
</style>
<div class="content">
<div class="progress">0%</div>
<button class="stop">停止</button>
<button class="reset">重置</button>
</div>
<script>
let dom = document.getElementsByClassName('progress')[0];
let stop = document.getElementsByClassName('stop')[0];
let reset = document.getElementsByClassName('reset')[0];
let num = 0;
var timer;
function run() {
num += 1;
dom.style.width = num + '%';
dom.innerHTML = num + '%';
if (num < 100) {
timer = requestAnimationFrame(run)
}
}
requestAnimationFrame(run);
stop.addEventListener('click', function () {
cancelAnimationFrame(timer)
})
reset.addEventListener('click', function () {
num = 0;
requestAnimationFrame(run)
})
</script>
</body>
</html>
