js 떨 림 방지 함수 와 절 류 함수 사용 장면 과 구별 예시 분석

본 고의 실례 는 js 떨 림 방지 함수 와 절 류 함수 의 사용 장면 과 실현 의 차 이 를 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
개발 과정 에서 특정한 사건 이 자주 발생 하 는 장면 을 만 났 습 니 다.예 를 들 어 resize,scroll 사건,input 사건 등 이 있 고 해당 하 는 사건 처리 함수 도 고주파 로 호출 될 수 있 습 니 다.이때 브 라 우 저 부담 이 증가 하고 사용자 체험 도 좋 지 않 습 니 다.이것 은 떨 림 방지 함수 와 절 류 함수 가 존재 하 는 의미 와 사용 장면 입 니 다.
함수 떨 림 방지(debounce):
지속 적 으로 이 벤트 를 촉발 할 때 설정 시간 대 에 촉발 되 지 않 고 이벤트 처리 함 수 를 호출 합 니 다.설정 시간 대 에 이벤트 가 또 촉발 되면 이벤트 처리 함 수 를 호출 하지 않 고 트리거 이벤트 시간 부터 다시 지연 합 니 다.
구체 적 인 실현:
디자인 사고방식:setTimeout 에서 이벤트 처리 함 수 를 호출 합 니 다.타이머 트리거 함수 가 실행 되 기 전에 함 수 를 터치 하면 타 이 머 를 제거 합 니 다.

function debounce(fn, timeout){
  timeout = timeout || 1000;
  let timer;
  return () => {
    if(timer){ clearTimeout(timer)}
    timer = setTimeout(() => {
      fn()
    },timeout)
  }
}
 
function printEvent(){
  console.log('1121212')
}
 
window.addEventListener('scroll',debounce(printEvent,1000),false)

절 류 함수(throttle)  throttle   ['θrt(ə)l]  액셀러레이터절기 문말살 하 다
이벤트 가 계속 실 행 될 때 설정 시간 내 에 이벤트 처리 함수 만 실 행 됩 니 다.
타이머 구현 모드:타이머 가 지연 시간 에 실 행 된 후에 null 로 리 셋 되 고 타이머 가 null 일 때 타 이 머 를 다시 설정 합 니 다.이렇게 순환 합 니 다.

//    
function throttle(fn, range){
  range = range || 1000;
  let timer;
  return () => {
    //console.log(111,typeof timer)
    if(!timer){
      timer = setTimeout( () => {
        fn()
        timer = null
      },range)
    }
  }
}
 
window.addEventListener('mousemove',throttle(printEvent,1000),false)

타임 스탬프 구현 모드:초기 화 할 때 시간 을 가 져 옵 니 다.이벤트 가 실 행 될 때마다 시간 을 다시 가 져 옵 니 다.두 번 의 시간 간격 은 설정 시간 보다 크 거나 같 습 니 다.이 벤트 를 실행 하고 초기 화 시간 을 현재 시간 으로 초기 화 합 니 다.이렇게 순환 합 니 다.

//          
var throttle2 = function(func, delay) {
　　var prev = Date.now();
　　return function() {
　　　　var context = this;
　　　　var args = arguments;
　　　　var now = Date.now();
　　　　if (now - prev >= delay) {
　　　　　　func.apply(context, args);
　　　　　　prev = Date.now();
　　　　}
　　}
}

타임 스탬프 와 타 이 머 를 결합 하여 실현 할 수 있 습 니 다.
요약:
함수 떨 림 방지:이벤트 가 발생 하지 않 은 후 시간 을 설정 하여 이 벤트 를 실행 합 니 다.몇 번 의 조작 을 하나 로 합 쳐 진행 합 니 다.이렇게 되면 마지막 조작 만 이 촉발 된다.
함수 절 류:일정 시간 에 한 번 만 함 수 를 촉발 합 니 다.원 리 는 일정한 시간 에 도 달 했 는 지 판단 을 통 해 함 수 를 촉발 하 는 것 이다.
구별: 함수 절 류 는 사건 의 촉발 이 아무리 빈번 하 더 라 도 규정된 시간 내 에 반드시 진정한 사건 처리 함 수 를 실행 할 것 을 보장 합 니 다.함수 떨 림 방지 는 마지막 사건 후에 만 한 번 의 함 수 를 촉발 합 니 다.
예 를 들 어 페이지 의 무한 로 딩 장면 에서 우 리 는 사용자 가 페이지 를 굴 릴 때 일정 시간 마다 Ajax 요청 을 보 내야 합 니 다.사용자 가 페이지 를 굴 리 는 작업 을 멈 출 때 만 데 이 터 를 요청 하 는 것 이 아 닙 니 다.이런 장면 은 절 류 기술 로 실현 하기에 적합 하 다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.