조절판
우리가 여기서 이야기하는 스로틀은 기능 스로틀을 의미합니다. 간단히 말해서, 기능 호출의 주파수 컨트롤러는 시간 간격 제어를 지속적으로 수행하는 것입니다. 다음과 같은 주요 응용 프로그램 시나리오
1. 마우스 이동 이벤트
2. DOM 요소의 동적 위치, 창 개체의 이벤트 크기 조정 및 스크롤
어떤 사람들은 위에서 언급 한 사건을 기관총의 스트래프 링과 생생하게 비교합니다. 스로틀은 기관총의 방아쇠입니다. 방아쇠를 넣지 않으면 계속 발사됩니다. 우리가 개발 중에 사용한 위의 이벤트에서도 마찬가지입니다. 마우스를 풀지 않으면 이벤트가 항상 트리거됩니다. 예를 들어:
코드 사본은 다음과 같습니다.
var resizetimer = null;
$ (창) .on ( 'resize', function () {
if (resizetimer) {
클리어 타임 아웃 (resizetimer)
}
resizetimer = settimeout (function () {
Console.log ( "창 크기 조정");
}, 400);
분노
분해는 스로틀과 매우 유사합니다. 분해는 자유 시간이 특정 값보다 크거나 동일해야 할 때 실행되는 방법입니다. 분해는 자유 시간의 간격 제어입니다. 예를 들어, 자동 완성 할 때 텍스트를 입력 할 때 메소드를 호출하는 시간 간격을 제어해야합니다. 일반적으로 첫 번째 입력 문자는 즉시 호출을 시작하고 실행 된 방법은 특정 시간 간격에 따라 반복적으로 호출됩니다. 특정 입력을 억제하고 넣지 않는 것과 같은 비정상적인 입력에 특히 유용합니다.
분해의 주요 응용 프로그램 시나리오는 다음과 같습니다.
텍스트 입력 키 다운 이벤트, 키 업 이벤트 (예 : AutoComplete)
undercore.js는 스로틀과 디바운드를 캡슐화하는 것과 같은 이러한 유형의 온라인에 대한 많은 방법이 있습니다. jQuery에는 스로틀 및 디오 트로우 스 (JQUERY THROTTLE/DEBACKE)에 대한 플러그인도 있습니다. 모든 원칙은 동일하며 동일한 기능이 구현됩니다. 다음은 내가 다시 사용하고있는 또 다른 스로틀 및 분동 제어 기능입니다.
코드 사본은 다음과 같습니다.
/*
* 주파수 제어 반환 기능이 연속적으로 호출되면 FN 실행 주파수는 매번 실행되는 횟수로 제한됩니다.
* @param fn {function} 호출 해야하는 함수
* @param 지연 {number} 밀리 초의 지연 시간
* @param ormerial {bool}은 즉각적인 매개 변수로 false를 전달합니다. 결합 함수는 지연된 다음 실행되지 않고 먼저 실행됩니다.
* @return {function} 실제로 함수를 호출합니다
*/
var 스로틀 = 함수 (fn, 지연, 즉시, 분비) {
var cur = +new date (), // 현재 이벤트
last_call = 0,
last_exec = 0,
타이머 = null,
diff, // 시차
컨텍스트, // 문맥
args,
exec = function () {
last_exec = curr;
fn.apply (컨텍스트, args);
};
return function () {
curr = +new 날짜 ();
컨텍스트 = 이것,
args = 인수,
diff = curr- (debounce? last_call : last_exec) - 지연;
클리어 타임 아웃 (타이머);
if (debounce) {
if (즉시) {
타이머 = settimeout (exec, Delay);
} else if (diff> = 0) {
exec ();
}
} 또 다른 {
if (diff> = 0) {
exec ();
} else if (즉시) {
타이머 = settimeout (exec, -diff);
}
}
last_call = curr;
}
};
/*
* 유휴 제어 반환 기능이 연속적으로 호출되면 FN이 실행되기 전에 유휴 시간이 지연보다 더 크거나 동일해야합니다.
* @param fn {function} 호출되는 함수
* @param 지연 {번호} 자유 시간
* @param ormerial {bool}은 즉각적인 매개 변수로 false를 전달합니다. 결합 함수는 지연된 다음 실행되지 않고 먼저 실행됩니다.
* @return {function} 실제로 함수를 호출합니다
*/
var debounce = function (fn, Delay, ormeriate) {
리턴 스로틀 (FN, 지연, 즉시, 참);