JS - setTimeout 타이머주는 법

setTimeout()

x 초 후에 코드를 실행

setTimeout(function(){ 실행할코드~ }, 기다릴시간);

시간의 단위는 ms (1s = 1000분의 1초)

<div class="alert alert-danger">
  5초 이내 구매시 사은품 증정
</div>
<script>
setTimeout(function(){ 
  console.log('안녕')
}, 1000);
</script>

-> 1초 후 콘솔창에 '안녕' 이라고 뜸

Q. 페이지 방문 5초 후의 <div>를 숨기려면?

<div class="alert alert-danger">
  5초 이내 구매시 사은품 증정
</div>

<script>
  setTimeout(function(){
    $('.alert').hide();
  }, 5000);

</script>

setInterval()

X초마다 코드를 실행하고싶으면 setTimeout()을 연달아 여러 개 쓰거나 setInterval쓰기

setInterval(function(){ 실행할코드~ }, 기다릴시간);

setInterval(function(){ 
  console.log('안녕')
}, 1000);

-> 1초마다 콘솔창에 '안녕' 이라고 뜸

자바스크립트 문법 vs 브라우저 사용법 (Web API)

var let const if function
자바스크립트 프로그래밍 문법

document.querySelector()
alert()
setTimeout()
addEventListener()
이런건 웹 브라우저 사용법

웹 개발을 잘하고 싶으면 JS문법 뿐만 아니라 웹 브라우저 사용법을 많이 알아야 예쁜 UI도 만들고 이벤트도 걸고 할 수 있다!

짧게 콜백함수

함수 파라미터 자리에 들어가는 함수를 콜백함수 라고 함

setTimeout(함수, 1000);

function 함수(){ 
  console.log('안녕')
}

-> 1초 후에 '안녕' 출력댐

---

오늘의 숙제 📒

위에서 만든 <div> 안에 "5초 이내 구매시 사은품 증정" 이라는 문자를 1초마다 5라는 문자를 1씩 감소 시키기
0이되면 <div>를 안보이게 처리

5라는 숫자만 <span>5</span> 감싸면 html 조작이 쉬워용~

<script>
setTimeout(() => {
	$("#setTime").text("4");
	}, 1000);
	setTimeout(() => {
	$("#setTime").text("3");
	}, 2000);
	setTimeout(() => {
	$("#setTime").text("2");
	}, 3000);
	setTimeout(() => {
	$("#setTime").text("1");
	}, 4000);
	setTimeout(() => {
	$(".alert").hide();
	}, 5000);
</script>