javascript_기본지식으로 스로틀과 디바운스에 대한 간략한 분석

스로틀

여기서 말하는 스로틀은 기능 스로틀을 의미합니다. 더 간단하게 말하면 함수 호출의 빈도 제어기는 연속 실행 시간 간격 제어입니다. 주요 적용 시나리오는 다음과 같습니다.

1. 마우스 이동, mousemove 이벤트
2. DOM 요소의 동적 위치 지정, 창 개체의 크기 조정 및 스크롤 이벤트

누군가는 위의 사건을 기관총 발사에 생생하게 비유했습니다. 스로틀은 기관총의 방아쇠를 놓지 않으면 계속 발사됩니다. 개발 중에 사용하는 위의 이벤트도 마찬가지입니다. 마우스를 놓지 않으면 해당 이벤트가 계속 실행됩니다. 예:

코드 복사 코드는 다음과 같습니다.

var resizeTimer=null;
$( window).on('resize',function(){
if(resizeTimer){
clearTimeout(resizeTimer)
}
resizeTimer=setTimeout(function(){
console.log( "창 크기 조정");
},400);

디바운스

디바운스는 스로틀과 매우 유사합니다. 디바운스는 유휴 시간이 특정 값보다 크거나 같아야 하는 경우에만 호출 메서드가 실행된다는 의미입니다. 디바운스는 유휴 시간의 간격 제어입니다. 예를 들어 자동 완성을 수행할 때 텍스트를 입력할 때 호출 메서드 간의 시간 간격을 잘 제어해야 합니다. 일반적으로 첫 번째 입력 문자는 즉시 호출되며, 실행 메소드는 일정 시간 간격에 따라 반복적으로 호출됩니다. 특히 특정 건물을 길게 누르는 등 비정상적인 입력에 유용합니다.

디바운스의 주요 적용 시나리오는 다음과 같습니다.
텍스트 입력 keydown 이벤트, 자동 완성과 같은 keyup 이벤트

이런 종류의 온라인 방법이 많이 있습니다. 예를 들어 Underscore.js는 스로틀과 디바운스를 캡슐화합니다. jQuery에는 스로틀 및 디바운스 플러그인도 있습니다. jQuery 스로틀/디바운스 모든 원칙은 동일하며 동일한 기능이 구현됩니다. 제가 사용했던 또 다른 스로틀 및 디바운스 제어 기능은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

/*
* 주파수 제어 복귀 함수를 연속적으로 호출하면 fn의 실행 빈도는 매번 1회로 제한됩니다.
* @param fn {function} 호출해야 하는 함수
* @param 지연 {숫자} 지연 시간(밀리초)
* @param 즉시 {bool} 즉시 매개변수에 false를 전달하면 바인딩된 함수가 지연 이후가 아닌 먼저 실행됩니다.
* @return {function}실제로 함수 호출
*/
var throttle = function(fn, 지연, 즉시, 디바운스) {
var curr = new Date(),//현재 이벤트
last_call = 0,
last_exec = 0,
타이머 = null,
diff, //시간 차이
context,//context
args,
exec = 함수( ) {
last_exec = curr;
fn.apply(context, args);
};
return function () {
curr= new Date();
context = this ,
args = 인수,
diff = curr - (디바운스 ? last_call : last_exec) - 지연;
clearTimeout(timer);
if(디바운스) {
if(즉시) {
타이머 = setTimeout(실행, 지연);
                                                                                   | > 🎜>};

/*
* 유휴 제어 복귀 함수가 연속적으로 호출되면 유휴 시간은 지연 시간보다 크거나 같아야 하며 fn이 실행됩니다.
* @param fn {function} 호출할 함수
* @ param 지연 {숫자} 유휴 시간
* @param 즉시 {bool} 즉시 매개변수에 false를 전달하면 바인딩된 함수가 지연 이후가 아닌 먼저 실행됩니다.
* @return {function}실제 함수 호출
*/

var debounce = function(fn, Delay,immediate) {
return throttle(fn,delay,immediate,true) ;