JavaScript의 제한 및 디바운싱: 초보자 가이드

JavaScript를 사용할 때 과도한 이벤트 트리거로 인해 애플리케이션 속도가 느려질 수 있습니다. 예를 들어, 사용자가 브라우저 창 크기를 조정하거나 검색창에 입력하면 짧은 시간 내에 이벤트가 반복적으로 실행되어 앱 성능에 영향을 미칠 수 있습니다.

여기서 조절과 디바운싱이 도움이 됩니다. 너무 자주 발생하는 이벤트를 처리할 때 함수가 호출되는 빈도를 관리하는 데 도움이 됩니다.

---

? 조절이란 무엇입니까?

제한은 기능이 실행될 수 있는 빈도를 제한합니다. 이벤트가 반복적으로 발생하더라도 제한 기능은 지정된 시간 간격마다 최대 한 번만 실행됩니다.

예:

콘서트에 가서 사진을 찍고 있다고 상상해 보세요. 하지만 당신은 (공연이 아무리 흥미로워도) 5분마다 한 장의 사진만 찍기로 결정했습니다. 마치 스로틀링과 같습니다. 사진 찍을 만한 순간이 아무리 많이 발생하더라도 5분마다 한 장씩 사진을 찍는다는 규칙을 따르게 됩니다.

자바스크립트에서는 사용자가 페이지를 아래로 스크롤하는 빈도를 추적하고 싶지만 밀리초마다 함수가 실행되는 것을 원하지 않을 때 이 기능을 적용할 수 있습니다. 조절을 통해 해당 기능이 실행되는 빈도를 제어할 수 있습니다.

코드 예:

function handleScroll() {
  console.log("Scrolled!");
}

window.addEventListener('scroll', throttle(handleScroll, 2000));

function throttle(func, limit) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall >= limit) {
      lastCall = now;
      func();
    }
  };
}

이 예에서 handlerScroll 함수는 사용자가 스크롤하는 속도나 빈도에 관계없이 2초(2000밀리초)마다 한 번만 실행됩니다.

---

? 디바운싱이란 무엇입니까?

디바운싱을 사용하면 일정 기간 동안 활동이 없을 때만 함수가 호출됩니다. 이벤트가 계속 발생하면 함수는 타이머를 계속 재설정하고 이벤트가 중지된 후에만 트리거됩니다.

예:

그룹 채팅에 참여하여 메시지를 입력하고 있다고 상상해 보세요. 키를 누를 때마다 친구에게 알림을 보내고 싶지는 않습니다. 대신 "입력 중..." 알림을 보내기 전에 몇 초 동안 입력을 멈출 때까지 기다리는 것이 좋습니다. 이는 수신 거부입니다. 입력이 잠시 중단된 후에만 알림을 보냅니다.

JavaScript에서는 사용자가 검색창에 입력할 때 디바운싱이 자주 사용됩니다. 각 키를 누른 후 검색어를 보내는 대신 사용자가 잠시 입력을 멈출 때까지 기다렸다가 검색을 수행할 수 있습니다.

코드 예:

function handleInput() {
  console.log("User stopped typing!");
}

const inputField = document.querySelector('input');
inputField.addEventListener('input', debounce(handleInput, 500));

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

이 예에서 handlerInput 함수는 사용자가 500밀리초 동안 입력을 중지한 후에만 실행됩니다.

---

---

? 스로틀링 또는 디바운싱을 언제 사용해야 합니까?

⚡️ 시간이 지남에 따라 함수가 호출되는 빈도를 제어하려면 제한을 사용하세요. 다음과 같은 이벤트에 적합합니다.

=> 스크롤
=> 창 크기 조정
=> 마우스 움직임

⚡️ 이벤트 실행이 완료된 후에만 함수가 호출되도록 하려면 디바운싱을 사용하세요. 다음과 같은 이벤트에 적합합니다.

=> 검색창에 입력
=> 양식 제출
=> 창 크기 조정(레이아웃 조정 등의 작업용)

---

결론 ✅

제한 및 디바운싱은 JavaScript 애플리케이션의 성능과 응답성을 향상시키는 훌륭한 기술입니다.

기능 실행 빈도를 관리하여 너무 많은 이벤트로 인해 앱이 과부하되는 것을 방지합니다.

사용 시기와 방법을 이해하면 가장 바쁜 앱에서도 코드를 원활하게 실행할 수 있습니다!

---

즐거운 코딩하세요! ?

위 내용은 JavaScript의 제한 및 디바운싱: 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!