setTimeout

setTimeout은 비동기 함수로 다른 함수 호출을 막지 않는다.

setTimeout은 함수이기 때문에 기본적으로 함수 구조를 갖는다.

setTimeout(() => {}) 하지만 여기에서 중요한 건 두 번째 인자로 count가 들어가는데, 그 카운트 이후에 함수를 실행시킨다는 뜻이다.

setTimeout(() => {console.log("첫 번째 메시지")}, 5000);
setTimeout(() => {console.log("두 번째 메시지")}, 3000);
setTimeout(() => {console.log("세 번째 메시지")}, 1000);

// 콘솔 출력:

// 세 번째 메시지
// 두 번째 메시지
// 첫 번째 메시지

IntersectionObserver()

IntersectionObserver API는 부모 컨테이너 또는 브라우저 창에서 변화가 일어나는 것을 감지하는 것이다.

이것 또한 비동기적으로 관찰하는 방법이다.

우리가 원하는 요소가 특정한 영역에 들어왔을 때 알려주는 관찰자로 생각하면 된다.(콜백 함수를 그 때 불러온다.)

기본 틀

const observer = new IntersectionObserver(callback, options);

여기서 이것을 사용하려면

observer.observe()

를 사용한다.

또한 option이 들어가는데, option 기본값은 이렇다.

let options = {
  root: null,
  rootMargin: '0px',
  threshold: 0
}

threshold가 0이면 구역에 들어오자마자 감지를 하게되고, threshhold가 1이면 전부 구역으로 들어와야 감지를 한다.

여기서 포인트는 threshhold가 1이라면, 반대로 나갈 때는 0으로 인식이 되어 나가자마자 사라진다는 것이다.

root가 null이면 브라우저를 기준으로 하는 것이고 root에 다른 container를 넣는다면 기준이 container로 바뀐다.

rootMargin은 root를 기준으로 margin을 넣는 것으로, 기본적인 CSS처럼 margin을 넣을 수 있다.

만약에 rootMargin이 100px라면, 브라우저 기준으로 100px 더 큰 것을 기준으로 삼아서 observe를 하게 된다.

또한 console.log를 찍으면 나오는 몇몇이 있는데, 지금 내가 알고 있는 것은 isintersecting으로 만약 true라면 화면에 있다이고 false라면 화면에 없다는 것이다.

이걸 이용해서 많은 걸 만들어볼 수 있다.

const sectionIds = ["#home", "#about", "#skills", "#work", "#contact"];

const sections = sectionIds.map((id) => document.querySelector(id));
const navItems = sectionIds.map((id) =>
  document.querySelector(`[data-link="${id}"]`)
);

const observerOptions = {
  root: null,
  rootMargin: "0px",
  threshold: 0.3,
};

const observerCallback = (entries, observer) => {
  entries.forEach((entry) => {
    console.log(entry.target);
  });
};
const observer = new IntersectionObserver(observerCallback, observerOptions);
sections.forEach((section) => observer.observe(section));

짧은 예시. 수정해야함