오늘 내가 배운 것
1. setTimeout, setInterval
2. 싱글 스레드
3. 동기와 비동기
4. 이벤트 루프(event loof)
1. setTimeout, setInterval
window.setTimeout
window.setInterval // window는 생략 가능하다.일정 시간이 지난 후에 원하는 함수를 예약 실행(호출) 할 수 있게 하는 것을 '호출 스케줄링)이라고 한다.
이 두 개의 메서드는 자바스크립트의 스펙이 아니지만 시중에 나와있는 대부분의 호스트 환경에서 유사한 메서드, 내부 스케줄러를 지원한다.
기본 문법
window.setTimeout(callback, 시간)
//callback : function ->실행할 함수
//시간 : number -> 시간 // ms 단위로
window.setInterval(callback, 시간)
//callback : function ->실행할 함수
//시간 : number -> 시간setTimeout : 2번째 인자 값인 number 즉, 밀리세컨드 가 충족되었을 때 딱 한 번만 실행한다.
setInterval : 2번 째 인자 값인 number 즉, 밀리세컨드 가 충족되었을 때 설정 시간마다 계속 실행한다.
인터벌을 종료하고 싶으면 인터벌을 변수로 선언해 놓고 `clearInterval(변수명)` 을 사용하면 된다. if문과 함께 사용하면 조건에 따른 종료도 가능하다.
2. 싱글 스레드
프로그램을 해석하는 사람이 한명이다. => 콜스텍이 하나이다.
자바스크립트는 콜스텍이 한 개인 언어여서 싱글 스레드 언어라고 말하기도 한다.
싱글 스레드의 단점을 해결하기 위해 코드를 해석할 수 있는 공간을 브라우저에서 `백그라운드` 를 만들었다.
그래서 스레드(콜스텍)은 한 개이지만 스레드 역할을 하는 곳이 2개이다.
하지만, 백그라운드에서 작동되는 순간 개발자가 직접 컨트롤 할 수 없고, 컨트롤 할 수 있는 것은 콜스택 하나이기 때문에 싱글 스레드라고 하지만 멀티스레드처럼 작동한다.
3. 동기와 비동기
자바스크립트는 동기 방식, 백그라운드는 비동기 방식이다. 동기 방식인 콜스택은 한 번에 한 가지 코드만 처리할 수 있고, 비동기 방식인 백그라운드는 여러 가지 일을 동시에 처리할 수 있다. 비동기 방식을 동기적으로 코드를 구현해서 어느 정도 원하는 순서대로 출력을 할 수 있으면 프로그램을 잘 만들 수 있다.
console.log(1)
setTimeout(function (){
console.log(2)
}, 0)
console.log(3) //1 ,3, 2 콜스택이 실행이 다 되고 백그라운드가 실행되기 때문에..
//콜스텍을 처리가 제일 우선적..
어떤 순서로 실행이 되는지 알면 원하는 대로 짤 수 있다.
콜백 지옥 (callback hell) : 비동기 방식으로 프로그래밍을 할 때 발생하는 문제..
함수의 매개변수로 다른 함수가 들어가고 그 함수 안에 매개변수로 또 다른 함수가 들어가서 코드의 들여 쓰기가 심하게 깊어지는 현상을 말한다.
4. 이벤트 루프( Event loof)
코드가 실행이 될 때 브라우저에서 만든 함수를 백그라운드로 넣고 설정 시간이 지난 후 실행을 하면서 테스크 큐에 넣어둔다. 테스크 큐는 선입선출, 즉, 먼저 실행된 코드가 먼저 실행이 된다. 테스크 큐는 콜스택을 보고 있다가 콜스택의 함수들의 실행이 끝난 후 테스크 큐에서 대기하고 있던 코드들이 콜스택으로 들어갔다 나오면서 코드가 실행이 된다.
HTML
<!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>
<link href="./public/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<ul id="visual">
<li class="a on">1</li>
<li class="b">2</li>
<li class="c">3</li>
<li class="d">4</li>
<li class="e">5</li>
</ul>
<script src="./public/js/index2.js" type="text/javascript"></script>
</body>
</html>CSS
const a = document.querySelector('.a')
const b = document.querySelector('.b')
const c = document.querySelector('.c')
const d = document.querySelector('.d')
const e = document.querySelector('.e')
const element = document.querySelectorAll("#visual > li")
// [element, element, element, element, element ]
let count = 1
const intevalId = setInterval(function(){
for(let i = 0 ; i < element.length; i++){
if(i == count){
element[i].classList.add("on")
}else{
element[i].classList.remove('on')
}
}
if(++count == 5) count = 0
}, 3000)
// let count = 1
// setInterval(function(){
// if(count === 0){
// //className 을 안쓰는 이유
// a.classList.add('on')
// b.classList.remove('on')
// c.classList.remove('on')
// d.classList.remove('on')
// e.classList.remove('on')
// }else if(count === 1){
// a.classList.remove('on')
// b.classList.add("on")
// c.classList.remove('on')
// d.classList.remove('on')
// e.classList.remove('on')
// }else if(count === 2){
// a.classList.remove('on')
// b.classList.remove('on')
// c.classList.add("on")
// d.classList.remove('on')
// e.classList.remove('on')
// }else if(count === 3){
// a.classList.remove('on')
// b.classList.remove('on')
// c.classList.remove('on')
// d.classList.add("on")
// e.classList.remove('on')
// }else if(count === 4){
// a.classList.remove('on')
// b.classList.remove('on')
// c.classList.remove('on')
// d.classList.remove('on')
// e.classList.add("on")
// }
// if(++count == 5 ) count = 0
// }, 3000)
'시작 > TIL(Today I Learned)' 카테고리의 다른 글
| 221114 실전예제 - 웹페이지 MENU 만들기, 슬라이드 영역만들기 (0) | 2022.11.14 |
|---|---|
| 221111 실전예제 - 웹페이지 메인 이미지(Visual) 영역 만들기 (0) | 2022.11.13 |
| 221109 JavaScript - form을 이용한 이벤트활용 (1) | 2022.11.10 |
| 221108 JavaScript - 이벤트 (EVENT) (0) | 2022.11.09 |
| 221107 JavaScript - DOM과 BOM , 배열 연습, 간단한 알고리즘 문제(선형검색, 완전탐색), 로또 번호 생성기 만들기 (0) | 2022.11.08 |
댓글