requestAnimationFrame
setInterval을 대체 할 수 있는 함수로써
백그라운드의 동작및 비활성화상태일때 중지를 하며
1초에 60번 동작
내부의 동일한 타이머를 사용한다.
<!DOCTYPE html>
<html>
<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>requestAnimationFrame</title>
<style>
.button {
font-size: 2rem;
}
</style>
</head>
<body>
<button class="button">취소</button>
<script>
let timeId;
let n = 0;
const button = document.querySelector('.button');
function sample() {
n++;
console.log(n);
if (n > 200) {
return;
}
timeId = requestAnimationFrame(sample);
}
sample();
button.addEventListener('click', function () {
cancelAnimationFrame(timeId);
});
</script>
</body>
</html>
sample 함수내 requestAnimationFrame 을 통해 sample을 호출 하기 때문에 무한 루프로 돌게 된다.
따라서 setInerval과 유사하게 동작한다.
'JavaScript > javascript 기초 공부하기' 카테고리의 다른 글
| prototype, class 비교하기 (0) | 2020.05.05 |
|---|---|
| javascript 객체지향을 위한 class 생성하기 (0) | 2020.05.02 |
| 커링 함수 currying function (0) | 2020.05.02 |
| every, some, Set, startsWith, includes, endsWidth (0) | 2020.05.02 |
| async / await (0) | 2020.01.26 |
