JavaScript의 제한 및 디바운싱: 초보자 가이드-JS 튜토리얼-php.cn

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

王林

풀어 주다： 2024-09-07 06:32:09

원래의

658명이 탐색했습니다.

Throttling & Debouncing in JavaScript: A Beginner

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밀리초 동안 입력을 중지한 후에만 실행됩니다.