1. 손떨림 방지 및 스로틀링 이해
손떨림 방지: 단위 시간 내에 이벤트를 자주 트리거하고 마지막 시간만 적용됩니다.
예를 들어 도시로 돌아갈 때 게임이 중단된 경우 다시 도시로 돌아가기를 클릭하면 시간이 다시 시작되며 결국 중단되지 않은 마지막 시간만 성공적으로 도시로 돌아갈 수 있습니다. 흔들림 방지
스로틀링: 이벤트는 단위 시간에 자주 트리거되며 한 번만 적용됩니다(즉, 처음에만 적용됨).
예를 들어 다음 캐러셀 이미지를 마우스로 클릭하면 단위 시간에 몇 번이나 캐러셀을 클릭해도 2초 만에 캐러셀 이미지가 교체되는데 이것이 스로틀링이다.
손떨림 방지 및 스로틀링 모두 성능 최적화 수단입니다.
둘, 같은
1. 둘 다 setTimeout을 사용하여 달성할 수 있습니다.
2. 둘 다 콜백 실행 빈도를 줄이고 컴퓨팅 리소스를 절약할 수 있습니다.
3. 차이점
1. 다른 정의
손떨림 방지 기능: 일정 시간 동안 연속적으로 이벤트를 트리거하고 마지막 시간에만 실행
기능 제한: 이벤트 내에서 한 번만 실행
2. 다양한 애플리케이션 시나리오
흔들림 방지 : (1) 휴대전화번호 및 이메일 주소 확인 (2) 이용자 입력란 입력 후 검색 등 요청 전송
스로틀링: 다음과 같은 고주파 이벤트: 확인 코드를 가져오는 데 몇 초 후, 이벤트 크기 조정 및 스크롤 이벤트 등
4. 코드 구현
1. 흔들림 방지:
<몸>
<입력 유형="텍스트" 아이디="i">
<스크립트>
// 1. 흔들림 방지
document.querySelector('#i').addEventListener('입력', () => {
디바운스()
})
let timeId = null
const 디바운스 = () => {
clearTimeout(시간 ID)
timeId = setTimeout(() => {
console.log("손떨림 방지 마지막 출력");
}, 1000)
}
</스크립트>
</body>
손떨림 방지 효과:
2. 스로틀링:
<몸>
<input type="button" id="btn" value="인증 코드 받기">
<스크립트>
// 2. 스로틀링
let flag = true // 제어 스위치 설정
let timeId = null
const inp = document.querySelector('#btn')
inp.addEventListener("클릭", () => {
if (!플래그) {
반품
}
플래그 = 거짓
s = 5로 하자
timeId = setInterval(() => {
초 -= 1
만약 (s < 1) {
inp.value = '인증 코드 받기'
플래그 = 참
에스 = 5
clearInterval(시간 ID)
} 또 다른 {
inp.value = s + '초 안에 인증 코드 다시 받기'
}
}, 1000)
})
</스크립트>
</body>