JavaScript 함수 조절에 대한 자세한 설명

JavaScript 기능 조절에 대한 자세한 설명

브라우저에는 웹 페이지에 대한 UI 스레드가 하나만 있으며, 이는 인터페이스 렌더링 및 페이지에서 JavaScript 코드 실행도 처리합니다(간단히 확장하기 위해). , 브라우저 또는 JavaScript 실행 환경은 단일 스레드가 아닙니다. ajax 비동기 콜백, 하이브리드 프레임워크 내의 기본 통신, 이벤트 큐, CSS 실행 스레드 등과 같은 것들은 모두 다중 스레드 환경입니다. 일부 비동기 상황을 줄이기 위한 Promise 클래스) 따라서 JavaScript 코드가 많은 계산이 필요한 메서드를 실행할 때 UI 스레드를 차단할 수 있으며 이로 인해 사용자의 응답이 정지될 수 있습니다. 심각한 경우 브라우저는 페이지가 응답하지 않는지 여부와 강제로 응답하도록 할지 여부를 묻는 메시지를 표시합니다. 닫다. 예를 들어 웹페이지의 페이지 스크롤 이벤트, 모바일 디바이스의 슬라이딩 및 줌 이벤트 등이 있습니다. 심각한 성능 문제가 없더라도 짧은 시간 내에 여러 번 발생하게 되는 대규모 처리 시간을 성능 최적화 관점에서 오프로드해야 합니다.

UI 스레드가 너무 긴 코드를 실행하는 것을 효과적으로 방지하는 방법은 모든 사용자 상호 작용 애플리케이션이 고려해야 할 문제입니다. 클라이언트 Android에서 동일한 문제에 대해 UI 기본 스레드를 사용하여 하위 스레드를 열 수 있습니다. 계산을 분산시키는 스레드. 이에 따라 js도 webWorker를 도입하여 계산을 분산시킬 수 있지만 js에는 더 간단하고 효과적인 방법인 함수 제한이 있습니다. 함수 조절을 사용하는 핵심 기술은 타이머 분할 계산을 사용하는 것입니다. 특정 구현 방법에는 대략 두 가지 아이디어가 있습니다.

·방법 1

1. 이 구현의 아이디어는 이해하기 쉽습니다. 50밀리초와 같은 간격을 설정하고 이 시간을 기준으로 타이머를 설정합니다. 첫 번째 트리거 이벤트와 두 번째 트리거 이벤트 사이의 간격이 50밀리초 미만인 경우 이 타이머를 지우고 새 타이머를 설정하는 등의 작업을 이벤트가 트리거된 후 50밀리초 이내에 반복되는 트리거가 없을 때까지 계속합니다. 코드는 다음과 같습니다.

function debounce(method){
   clearTimeout(method.timer);
   method.timer=setTimeout(function(){
      method();
   },50);
}

이 디자인에는 문제가 있습니다. 여러 번 실행되어야 하는 이벤트가 한 번만 발생할 수 있다는 것입니다. 구체적으로, 점진적인 스크롤링 이벤트의 경우 사용자가 너무 빠르게 스크롤하거나 프로그램에서 설정한 기능 조절 간격이 너무 길면 최종 스크롤링 이벤트가 갑작스러운 점프 이벤트로 나타나며 조절로 인해 중간 프로세스가 중단됩니다. . 이 예는 약간 과장되었지만 이 방법을 사용하여 조절하면 결국 프로그램이 조절되지 않았을 때보다 "더 갑작스럽다"는 느낌을 받게 되며 이는 사용자 경험에 매우 좋지 않습니다. 이런 단점을 보완할 수 있는 디자인 아이디어가 있습니다.

·방법 2

2. 두 번째 구현 방법의 아이디어는 첫 번째와 약간 다릅니다. one: 50ms 등의 간격 시간을 설정하여 이 시간을 기준으로 이벤트 트리거를 안정적으로 분리합니다. 즉, 여러 이벤트가 100ms 내에 연속적으로 트리거되면 50ms의 안정적인 간격으로만 실행됩니다. 코드는 다음과 같습니다.

var oldTime=new Date().getTime();
var delay=50;
function throttle1(method){
   var curTime=new Date().getTime();
   if(curTime-oldTime>=delay){
      oldTime=curTime;
      method();
   }
}

첫 번째 방법에 비해 두 번째 방법은 첫 번째 방법보다 더 많이 실행될 수 있습니다. 즉, 더 많은 트래픽)이지만 중간 프로세스를 지우는 첫 번째 방법의 단점을 해결합니다. 따라서 특정 시나리오에서는 상황에 따라 어떤 방법을 사용할지 결정해야 합니다.

방법 2에서는 동일한 함수를 작성하는 다른 방법을 제공합니다.

var timer=undefined,delay=50;
function throttle2(method){
    if(timer){
        return ;
    }
    method();
    timer=setTimeout(function(){
        timer=undefined;
    },delay);
}

마지막으로 함수 조절의 이름에 대해 이야기해 보겠습니다. throttle과 debounce라는 두 가지 메서드 이름을 자주 볼 수 있습니다. Throttle은 "control, stuck"으로 번역될 수 있고, debounce는 "anti-bounce"로 번역될 수 있습니다. 저자는 『JavaScript Advanced 프로그래밍』에서 방법 1을 소개했고, 함수명을 "throttle"이라고 사용했다. "Third-Party JavaScript 프로그래밍"이라는 책에는 방법 1과 방법 2가 모두 등장합니다. 저자는 방법 1을 "디바운스", 방법 2를 "스로틀"이라고 명명했습니다. 두 가지 방법을 동시에 도입할 때 중국의 일부 기사에서는 방법 1을 "throttle"로, 방법 2를 "debounce"로 잘못 명명하는 것은 영어 관점에서 볼 때 매우 무책임합니다. 따라서 여기서는 문제를 바로잡습니다. 방법 1은 "반운 방지"로 이해될 수 있으며 "디바운스"로 명명되어야 합니다. 방법 2는 "기능 제한"으로 이해될 수 있으며 "스로틀"로 명명되어야 합니다.

위 내용은 JavaScript 함수 조절에 대한 자세한 설명입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!