스크롤링
window.addEventListener("scroll", () => {
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
if (Math.round(scrollHeight - scrollTop) <= clientHeight) {
showLoading();
}
});
document.documentElement는 HTML문서에서 <html> 요소를 반환한다.
scrollHeight: 테두리 안 영역의 높이, 스크롤바에 감춰진 영역도 포함
clientHeight: 테두리 안 영역의 높이, 스크롤바 너비 포함 X
scrollTop : 세로 스크롤이 아래로 움직임에 따라 가려진 영역의 너비와 높이
참고:https://ko.javascript.info/size-and-scroll
요소 사이즈와 스크롤
ko.javascript.info
스크롤링 이벤트가 발생할 때마다 html 요소의 각각 영역들의 높이을 받아와
전체 높이인 scrollHeight에서 세로 스크롤이 내려간 높이만큼 뺀 값에 반올림 한 값이
눈에 보이는 테두리안 영역의 높이보다 작거나 같을 때, showLoading함수를 실행한다.
로딩 화면
function showLoading() {
loading.classList.add("show");
setTimeout(() => {
loading.classList.remove("show");
setTimeout(() => {
page++;
showPosts();
}, 300);
}, 1000);
}
setTimeout: 일정시간 후에 함수를 실행한다.
로딩 화면을 띄우고 난 후 setTimeout 함수로 1초 후에 로딩 화면을 지우고,
또다른 setTimeout함수를 실행해 0.3초 후에 다른 포스트들을 띄운다.
Post 보여주기
async function getPosts() {
const res = await fetch(
`https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`
);
const data = await res.json();
return data;
}
async function showPosts() {
const posts = await getPosts();
posts.forEach((post) => {
const postEl = document.createElement("div");
postEl.classList.add("post");
postEl.innerHTML = `
<div class="number">${post.id}</div>
<div class="post-info">
<h2 class="post-title">${post.title}</h2>
<p class="post-body">${post.body}</p>
</div>
`;
postsContainer.appendChild(postEl);
});
}
showPosts(); // 초기화면
async function : 비동기 함수를 정의한다.
await 키워드는 비동기 함수에서만 실행할 수 있는 것으로, await을 통해 반환된 결과를 변수에 할당한다.
그리고 비동기 함수 호출이 결과를 반환할 때 까지 기다리게 한다.
fetch로 데이터를 응답받는데, 바로 사용할 수는 없고 res객체의 json() 메서드를 사용해 Promise로 반환한다.
getPost함수에서 데이터가 반환되면 showPost함수에서 데이터의 정보들을 DOM요소로 추가한다.
'FRONT > JAVASCRIPT' 카테고리의 다른 글
| [JS] 바닐라 자바스크립트 벽돌깨기 게임 (0) | 2021.08.25 |
|---|---|
| [Javascript] 애니메이션 구현 - requestAnimationFrame (0) | 2021.08.15 |
| [JS] 바닐라 자바스크립트 타이핑 게임 (0) | 2021.08.09 |
| [JS] 자바스크립트 이벤트 위임( Event Delegation ) (0) | 2021.07.25 |
| [JS] 바닐라 자바스크립트 Meal finder (API 사용하기) (0) | 2021.07.25 |