에센스 안정화, 확장, 폐쇄

하하, 나는 또한 파티의 제목입니다, 오늘은 미래의 검토를 촉진하기 위해보기에서 오늘 배운 요약하고 싶습니다.

우선, 무엇 흔들?

이미지 안정화 : 이벤트가 더 이상 이벤트를 트리거하지 일정 시간을 발사 유지하면 설정 시간이 오기 전에, 다시 한 번 다시 시작 지연에 이벤트를 트리거하는 경우, 이벤트 처리기가 한 번 실행됩니다.

, 엘리베이터를 취 인용 더 적절한 예를 이해하기가 더 어렵 정의합니다. 시계가 승객 10 초 대기 할 때 10 초의 끝, 엘리베이터가 자동으로 문을 닫을 때마다 엘리베이터가 열린 상태로 유지되지만, 승객 입력이있는 경우이 시간, 엘리베이터는 10 초를 기다립니다. 네, 이미지 안정화의 정의입니다.

다시 안정화의 응용 시나리오는 설명합니다 :

　　　　예를 들어 : 입력 상자에 검색어를 입력 할 때, 학습 자원에 대한 Baidu 검색을 사용하는 경우에는 검색 창에 검색어와 관련된 용어를 권장합니다. 모든 사용자가 입력 한 시간이 아닌 권장 사항에 대한 단어.

이미지 안정화 기능은 실시간 검색 (kepup), 드래그 (MouseMove 이벤트) 및 기타 문제를 해결하는 것입니다.

 

 

가시 현재 이미지 안정화 공정을 추가 콜백 함수를 실행하는 각 트리거 이벤트 :

VAR 디 바운스 = 함수 (FUNC 지연) { 
  VAR 타이머 = NULL 
  창 함수 () { 
      이 = VAR; 
      var에 인수 = 인수; 
      
      경우에 (타이머) { 
          사항 clearTimeout (타이머); 
      } 

      타이머의 setTimeout = (함수 () { 
          func.apply (즉, 인수) 
      }, 지연) 
  } 
} 

ipt.addEventListener ( '의 keyup'디 바운스 (함수 (E) { 
  CONSOLE.LOG (e.target.value); 
} 400))

　　결과는 다음과 같습니다 :

입력 400ms 일을 중지 한 후 눈에 보이는 입력 상자 콜백. 흔들림 방지와 콜백 함수는 이후  timer 비어있을 때 첫 번째 레코드 타이밍 전에 타이밍마다 콜백. 여기에 참고 timer폐쇄 변수가 항상 타이머를 유지하고있다.

이것은 이미지 안정화라고합니다.

스로틀 기능

스로틀은 throttle: 특정 시간 간격은 한 번만 수행 콜백 이벤트 보자. 두 가지 방법으로 구현 된 기능을 스로틀 하나 하나가 시간 초과되면, 증가 기록이다.