SetTimeout(function,time)

함수를 1번만 실행한다.

setTimeout(function(){
	alert("hi");
}, 2000);

👉 2초가 지나면 "hi"라는 경고창을 띄운다.

SetInterval(function,time)

함수를 시간이 지날때마다 실행한다.

setInterval(function(){
	alert("hi");
}, 2000);

👉 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);
let a= setInterval(function(){});

👉 a변수의 실행을 멈춘다.

requsetAnimation

브라우저에게 애니메이션을 실행하도록 요청, 재귀 호출을 사용해서 반복

• 재귀 함수: 함수 내에서 다시 자기 자신을 부르는 함수
• 모니터 주사율에 자동으로 맞춰 함수가 호출된다.

let motion;
function fun1(){
	...
motion=recurisionFunc(fun1);
}

cancelAnimationFrame

cancelAnimationFrame(motion);

👉 motion변수의 실행을 멈춘다.