웹 전단 절 류 와 떨 림 방지

떨 림 방지 와 절 류 를 상세히 이야기 하 다.

1. 떨 림 방지 (debounce)

1.1 떨 림 방지 가 무엇 입 니까

1.2 응용 장면

1.3 실현

2. 스로틀 (throttle)

2.1 절 류 는 무엇 입 니까

2.2 응용 장면

2.3 실현

3. 소결

본 고 는 떨 림 방지 와 절 류 를 소개 하고 그들의 응용 장면 과 실현 방식 을 소개 한다.떨 림 방지 와 절 류 는 짧 은 시간 안에 특정한 함 수 를 대량으로 촉발 시 켜 발생 하 는 성능 문 제 를 해결 하기 위해 서 이다. 예 를 들 어 촉발 빈도 가 너무 높 아서 발생 하 는 응답 속도 가 촉발 빈 도 를 따라 가지 못 하고 지연, 가사 또는 멈 추 는 현상 이 나타난다.그러나 이들 이 대응 하 는 업무 수요 가 다 르 기 때문에 실현 의 원리 도 다르다. 구체 적 으로 살 펴 보 자.
1. 떨 림 방지 (debounce)
1.1 떨 림 방지 란 무엇 인가
이벤트 가 n 초 후에 리 셋 함 수 를 실행 하고 n 초 안에 다시 트리거 되면 다시 시간 을 잽 니 다.
1.2 응용 장면
(1) 사용 자 는 입력 상자 에 한 줄 의 문 자 를 연속 으로 입력 한 후 마지막 조회 ajax 요청 만 수행 합 니 다. 그러면 요청 횟수 를 효과적으로 줄 이 고 요청 자원 을 절약 할 수 있 습 니 다.
(2) window 의 resize, scroll 이벤트, 브 라 우 저의 창 크기 를 계속 조정 하거나 스크롤 할 때 해당 이벤트 가 발생 하여 떨 림 방지 가 한 번 만 발생 합 니 다.
1.3 전체 코드 는 다음 과 같다. let num = 1; let content = document.getElementById("content"); function count(){ content.innerHTML = num ++; } content.onmousemove = count; // debounce // 2 （ ） function debounce(func,wait){ let timeout; return function(){ if (timeout) clearTimeout(timeout); // timeout = setTimeout(function(){ func.apply(this); // func },wait) } } // ， 2 （ ） function debounce(func,wait){ let timeout; return function(){ if (timeout) clearTimeout(timeout); // let callNow = !timeout; timeout = setTimeout(()=>{ timeout = null; // },wait); if(callNow) func.apply(this);// } } content.onmousemove = debounce(count,2000);
코드 설명:
1. 이벤트 가 실 행 될 때마다 현재 의 이벤트 가 삭 제 됩 니 다. timer 그리고 시간 초과 호출 을 다시 설정 합 니 다. 즉, 다시 시간 을 재 는 것 입 니 다.이 로 인해 모든 고주파 사건 이 이전의 시간 초과 호출 을 취소 하고 사건 처리 프로그램 이 촉발 되 지 못 하 게 할 것 이다.
2. 고주파 이벤트 가 멈 추 면 마지막 이벤트 가 촉발 하 는 시간 초과 호출 만 delay 시간 후에 실행 할 수 있 습 니 다.
2. 스로틀 (throttle)
2.1 절 류 는 무엇 입 니까?
한 단위 의 시간 을 정 하고 이 단위 의 시간 내 에 한 번 만 사건 을 촉발 하 는 리 셋 함수 가 실 행 될 수 있 으 며, 같은 단위 의 시간 내 에 어떤 사건 이 여러 번 촉발 되면 한 번 만 효력 이 발생 한다.
2.2 응용 장면
(1) 마우스 가 어떤 이벤트 (예 를 들 어 클릭) 를 연속 으로 터치 하고 단위 시간 에 한 번 만 터치 합 니 다.
(2) 페이지 의 무한 로 딩 장면 에서 사용자 가 페이지 를 굴 릴 때 일정 시간 마다 ajax 요청 을 보 내야 합 니 다. 사용자 가 페이지 작업 을 멈 출 때 만 데 이 터 를 요청 하 는 것 이 아 닙 니 다.
(3) 스크롤 이 벤트 를 감청 합 니 다. 예 를 들 어 끝까지 미 끄 러 지 는 지 여 부 는 자동 으로 더 많이 불 러 오고 throttle 로 판단 합 니 다.
2.3 실현
아니면 상술 한 열 입 니까? 여기에 절 류 를 넣 어 최적화 합 니 다. 전체 코드 는 다음 과 같 습 니 다. let num = 1; let content = document.getElementById("content"); function count(){ content.innerHTML = num ++; } content.onmousemove = count; // throttle // 1. function throttle(func,wait){ let timeout; return function(){ if(!timeout){ // timeout = setTimeout(()=>{ timeout = null; func.apply(); }) } } } //2. function throttle(func,wait){ let prev = 0;// return function(){ let now = Date.now(); if(now - prev > wait){ // - > func.apply(this); prev = now; // } } } content.onmousemove = throttle(count,2000);
3. 소결
떨 림 방지 와 절 류 의 차 이 를 요약 한다.
-- 효과:
함수 떨 림 방지 는 일정 시간 에 한 번 만 실행 하 는 것 입 니 다.한편, 함수 절 류 는 간격 을 두 고 실행 하 는 것 으로 사건 의 촉발 이 아무리 빈번 하 더 라 도 규정된 시간 안에 반드시 진정한 사건 처리 함 수 를 실행 할 것 을 보장 합 니 다.
-- 원리:
떨 림 방지 는 타 이 머 를 유지 하 는 것 으로 delay 시간 후 트리거 함 수 를 규정 하지만 delay 시간 내 에 다시 트리거 하면 현재 의 것 을 제거 합 니 다. timer 그리고 시간 초과 호출 을 다시 설정 합 니 다. 즉, 다시 시간 을 재 는 것 입 니 다.이렇게 되면 마지막 조작 만 이 촉발 된다.
절 류 는 일정 시간 에 도달 할 지 여 부 를 판단 하여 함 수 를 촉발 하 는 것 이 며, 정 해진 시간 이 되 지 않 으 면 타 이 머 를 사용 하여 지연 시 키 고, 다음 사건 은 타 이 머 를 다시 설정 합 니 다.
문제 가 있 으 면 지적 을 환영 합 니 다.