JavaScript 함수 조절에 대한 자세한 설명 및 메서드 예제에 대한 자세한 설명

이 글은 주로 JavaScript 기능 제한에 대한 자세한 설명과 관련 정보를 예제와 함께 소개합니다. 필요한 친구는

JavaScript 기능 제한에 대한 자세한 설명

브라우저에는 웹 페이지에 대한 UI 스레드가 하나만 있습니다. 인터페이스 렌더링 처리와 페이지의 JavaScript 코드 실행을 동시에 수행합니다(간단히 확장하자면 브라우저 또는 JavaScript 실행 환경은 ajax 비동기 콜백, 기본 통신과 같은 단일 스레드가 아닙니다). 하이브리드 프레임워크에서는 이벤트 큐, CSS 실행 스레드 등이 모두 다중 스레드 스레드 환경이지만 ES6에서는 일부 비동기 상황을 줄이기 위해 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. 두 번째 구현 방법의 아이디어는 첫 번째와 약간 다릅니다. 50밀리초 등의 간격 시간을 설정하고 이 시간을 기반으로 꾸준히 이벤트를 분리합니다. 즉, 여러 이벤트가 100밀리초 내에 연속적으로 트리거되면 50밀리초의 안정적인 간격으로만 실행됩니다. 코드는 다음과 같습니다.

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

위 내용은 JavaScript 함수 조절에 대한 자세한 설명 및 메서드 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!