JavaScript 함수 제한 및 함수 디바운스 지식 포인트 학습

본 글은 JavaScript 함수 조절과 함수 디바운스에 관련된 지식 포인트를 공유합니다. 도움이 필요한 친구들이 배우고 참고할 수 있습니다.

Concept

Throttle: 함수가 너무 자주 실행되지 않도록 하고, 너무 빠르게 실행되는 호출을 줄입니다. 이를 throttling이라고 합니다.

Debounce(디바운스) Debounce는 일정 시간 동안 계속되는 함수입니다. 호출, 한 번만 실행되도록 하세요

throttle 응용 시나리오

• DOM 요소 드래그 기능 구현(mousemove)

• 슈팅 게임의 mousedown/keydown 이벤트(단위 시간당 하나만 발사 가능 Bullet)

• 마우스 이동 거리 계산(mousemove)

• 캔버스는 드로잉 보드 기능을 시뮬레이션합니다. 페이지) 더보기: Give 스크롤에 디바운스를 추가한 후 사용자가 스크롤을 멈춘 후 페이지 하단에 도달했는지 여부만 판단하고, 스로틀인 경우 페이지가 스크롤되는 동안마다 한 번씩 판단합니다.

디바운스 애플리케이션 시나리오

• 
  

  매번 크기 조정/스크롤이 통계 이벤트를 트리거함

텍스트 입력 확인(계속 텍스트를 입력한 후 AJAX 확인 요청을 보내고 한 번만 확인)
기능 디바운스 구현

스크롤 이벤트를 예로 들어 창을 스크롤하는 방법은 hello world 문자열을 인쇄하는 것입니다. 제한되거나 디바운싱되지 않은 경우:

window.onscroll = function () {
 console.log('hello world');
}

이런 방식으로 실제로 여러 개의 hello world가 인쇄됩니다. 창을 스크롤할 때마다 함수 디바운스의 기본 개념은 일부 코드가 중단 없이 계속 실행될 수 있다는 것입니다. 함수가 두 번째 호출되면 지워집니다. 이전 타이머를 설정하고 다른 타이머를 설정합니다. 단, 이전 타이머가 아직 실행되지 않은 경우 해당 기능 실행 요청이 일정 시간 동안 중지된 후에만 새 타이머로 교체하는 것이 목적입니다. Height Three"는 다음과 같이 가장 간결하고 고전적인 디바운스 코드를 제공합니다.

function debounce(method, context) {
 clearTimeout(method.tId);
 method.tId = setTimeout(function() {
 method.call(context);
 }, 1000);
}

function print() {
 console.log('hello world');
}

window.onscroll = function() {
 debounce(print);
};

Make some Change

function debounce(delay, action) {
 var tId;
 return function () {
  var context = this;
  var arg = arguments;
  if (tId) clearTimeout(tId);
  tId = setTimeout(function () {
   action.apply(context, arg);
  }, delay);
 }
}

window.onscroll = debounce(1000, print);

함수 조절 구현

함수 조절은 지속적으로 실행되는 함수를 일정 기간 동안 간헐적으로 실행되도록 하는 것입니다. 이를 구현하는 방법은 크게 두 가지가 있는데, 하나는 타임스탬프를 사용하여 콜백 실행 시간에 도달했는지 확인하고 마지막 실행의 타임스탬프를 기록한 다음 이벤트가 트리거될 때마다 콜백을 실행하는 것입니다. 현재 타임스탬프와 마지막 실행 타임스탬프 사이의 시간 간격은 *s입니다. 그렇다면 실행하고 마지막 실행 타임스탬프를 업데이트하세요.

var throttle = function(delay, action) {
 var last = 0;
 return function() {
  var curr = new Date();
  if (curr - last > delay) {
   action.apply(this, arguments);
   last = curr;
  }
 }
}

두 번째 방법은 타이머를 사용하는 것입니다. 예를 들어 스크롤 이벤트가 처음 트리거되면 hello world를 인쇄한 다음 1000ms 타이머를 설정합니다. 그 후 스크롤 이벤트가 트리거될 때마다 콜백이 트리거됩니다. 타이머가 이미 존재하는 경우 콜백은 타이머가 시작되고 핸들러가 지워질 때까지 메서드를 실행하지 않습니다. . 을 누른 다음 타이머를 재설정하세요.

var throttle = function(delay, action) {
 var timeout;
 var later = function () {
  timeout = setTimeout(function(){
   clearTimeout(timeout);
   // 解除引用
   timeout = null;
  }, delay);
 };
 later();
 if (!timeout) {
  action.apply(this, arguments);
  later();
 }
}

업데이트 방법:

function throttlePro(delay, action) {
 var tId;
 return function () {
  var context = this;
  var arg = arguments;
  if (tId) return;
  tId = setTimeout(function () {
   action.apply(context, arg);
   clearTimeout(tId);
   // setTimeout 返回一个整数，clearTimeout 之后，tId还是那个整数,setInterval同样如此
   tId = null;
  }, delay);
 }
}

위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면

JavaScript 비디오 튜토리얼
을 방문하세요.

위 내용은 JavaScript 함수 제한 및 함수 디바운스 지식 포인트 학습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!