SetTimeout(function,time)
setTimeout 함수를 1번만 실행
setTimeout(function(){
alert("hi");
}, 3000);3초가 지나면 "hi"라는 경고창을 띄운다.
SetInterval(function,time)
setInterval 함수를 시간이 지날때마다 실행
setInterval(function(){
alert("hi");
}, 3000);2초가 지날때마다 "hi"라는 경고창을 띄운다.
<div id="imgview"> <!-- overflow hidden이 들어간 객체 -->
<div id="imgDivs">
<div class="imgdiv"><img src="./images/img_lights1.jpg" alt=""></div>
<div class="imgdiv"><img src="./images/img_lights2.jpg" alt=""></div>
<div class="imgdiv"><img src="./images/img_lights3.jpg" alt=""></div>
<div class="imgdiv"><img src="./images/img_lights4.jpg" alt=""></div>
</div>
</div>
<script>
let imgDivs= document.querySelector("#imgDivs");
let i=0;
setInterval(function(){
imgDivs.style.left = `-${i*100}%`;
i++;
i= i>3? 0:i;
},1000)
</script>1초가 지날때마다 imgDivs를 left로 -(100 * i)% 움직인다.
clearInterval(timer)
clearInterval(a); 실행된 반복 작업을 종료하는 함수
setInterval과 clearInterval을 사용해서 중단/재시작 방법
setInterval()함수의 반환값을 변수에 할당하여 반복 시작
let 변수 = setInterval(콜백함수, 시간);
clearInterval(변수)로 반복 중단
clearInterval(변수);
setInterval()함수의 반환값을 변수에 재할당하여 재시작
변수 = setInterval(콜백함수, 시간);
let interval = setInterval(callback, 2000);
function callback() {
console.log('a');
}
//이렇게 2초 마다 callback 함수를 호출할 수 있다.
//이 반복을 해제하려면
clearInterval(interval);
//다시 반복 호출하려면?
interval = setInterval(callback, 2000);실행된 a변수의 반복 작업을 멈춘다.
requsetAnimation
브라우저에게 애니메이션을 실행하도록 요청, 재귀 호출을 사용해서 반복
재귀 함수[] : 함수 내에서 다시 자기 자신을 부르는 함수
모니터 주사율에 자동으로 맞춰 함수가 호출된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
</head>
<body>
<div
class="test"
style="width: 100px; height: 100px; background-color: black"
<!-- 검정색 100 x 100 사각형 -->
></div>
<script>
const div_test = document.querySelector(".test");
// 사각형의 width
let test_width = 200;
// 반복적으로 호출하며 사각형의 너비를 늘리는 함수 animation
function animation() {
test_width += 2;
div_test.style.width = `${test_width}px`;
// 이 함수를 재귀적으로 반복 호출되도록 등록한다. 단, 리페인트 전에 실행되도록!
requestAnimationFrame(animation);
}
// animation 함수 호출 등록 => 무한 반복된다!
requestAnimationFrame(animation);
</script>
</body>
</html>cancelAnimationFrame
cancelAnimationFrame(motion); 스케줄된 애니메이션 프레임 요청을 취소
function animation() {
test_width += 2;
div_rect.style.width = `${test_width}px`;
// 이 함수를 재귀적으로 반복 호출되도록 등록한다. 단, 리페인트 전에 실행되도록!
// effect 변수에 "등록ID"가 할당
const effect = requestAnimationFrame(animation);
// width가 400이 넘으면?
if (test_width > 200) {
// 리페인트 전에 스케줄된 애니매이션 프레임 요청을 취소한다. => 즉, 반복이 멈춘다.
cancelAnimationFrame(effect);
}
}
// animation 함수를 호출한다. 단, 페인트 전에 실행되도록!
requestAnimationFrame(animation);