JS의 기능 조절 및 기능 안정화(자세한 튜토리얼)

이 글은 주로 JS 기능 제한 및 기능 흔들림 방지 문제에 대한 분석을 소개합니다. 매우 훌륭하고 참고할 가치가 있습니다. 필요한 친구가 참고할 수 있습니다.

질문 1: DOM 드래그 앤 드롭 기능이 구현되어 있지만 드래그를 바인딩할 때 이벤트를 드래그할 때 요소가 조금씩 움직일 때마다 수많은 콜백 함수가 실행되어 브라우저가 바로 정지되는 것을 발견했습니다. 이때 어떻게 해야 합니까?

**질문 2:**양식 제출을 위해 버튼이 게시물 이벤트에 바인딩되어 있지만 때때로 사용자가 극도로 열악한 네트워크 상태에서 버튼을 여러 번 클릭하여 양식이 반복적으로 제출되는 경우, 어떻게 해야 할까요? 여러 제출이 발생하지 않도록 하시겠습니까?

위의 시나리오를 처리하기 위해 함수 흔들림 방지와 함수 조절이라는 두 가지 개념이 등장했습니다. 일반적으로:

이 두 가지 방법은 타임라인에서 함수의 실행 횟수를 제어하는 ​​것입니다.

Function debounce(debounce)

개념: 이벤트가 트리거된 후 n초 후에 콜백을 실행합니다. 이 n초 내에 다시 트리거되면 시간을 다시 시작합니다.

실생활의 예: 누군가 엘리베이터에 들어가면(이벤트 트리거) 엘리베이터는 10초 후에 출발합니다(이벤트 리스너 실행). 이때 누군가 다시 엘리베이터에 들어가면(10초 이내에 다시 이벤트 트리거) , 시작(시간 재조정)하기 전에 10초를 더 기다려야 합니다.

기능 제한(throttle)

개념: 단위 시간을 지정합니다. 이 단위 시간 동안 이벤트를 트리거하는 콜백 함수는 동일한 단위 시간에 여러 번 실행될 수 있습니다. , 번, 하나만 적용할 수 있습니다.

실생활의 예: 현재 진술 중 하나는 24개 이상의 사진이 1초 내에 연속 재생되면 인간의 시각에 일관된 애니메이션이 형성된다는 것입니다. 따라서 영화를 재생할 때(이전에는 잘 모르겠습니다) 현재)는 기본적으로 초당 24장의 사진 속도로 재생됩니다. 100장 이상의 사진은 왜 안 될까요? 24장의 사진이 인간의 시각적 요구를 충족할 수 있다면 100장의 사진은 자원 낭비처럼 보일 것입니다.

분석 차트

총 관찰 시간이 10초이고 1초가 이벤트의 최소 간격 시간으로 지정되었다고 가정합니다.

이벤트를 트리거하는 빈도가 0.5초/시간인 경우 손떨림 방지 기능은 그림과 같습니다.

다시 트리거되기 전에 1초를 기다릴 수는 없으므로 결국 어떤 이벤트도 성공하지 못했습니다.

스로틀링 기능은 그림과 같습니다

최대 1초에 1회 제어되고 빈도는 0.5s/시간이므로 1초마다 하나의 이벤트가 무효화됩니다. 최종 제어는 1s/time입니다

트리거 이벤트의 빈도가 2s/time이면

기능 흔들림 방지는 그림과 같습니다

2s/time
이 이미 지정된 값보다 크므로 최소 시간이므로 2초마다 한 번씩 트리거됩니다.

기능 조절은 그림과 같습니다.

마찬가지로 2s/time은 최소 시간 요구 사항보다 크므로 모든 트리거가 적용됩니다.

신청 시나리오

손떨림 방지 기능의 경우 다음과 같은 적용 시나리오가 있습니다.

• 양식이 여러 번 제출되는 것을 방지하기 위해 버튼에 손떨림 방지 기능을 추가합니다.

• 입력 상자에 연속 입력에 대한 AJAX 검증을 수행할 때 손떨림 방지 기능을 사용하면 요청 횟수를 효과적으로 줄일 수 있습니다.

• 스크롤이 아래쪽으로 미끄러졌는지 확인, 스크롤 이벤트 + 흔들림 방지 기능

일반적으로 여러 이벤트에 동시에 대응하는 데 적합합니다

기능 조절의 경우 다음과 같은 시나리오가 있습니다. :

• 게임 내 새로 고침 빈도

• DOM 요소 끌기

• 캔버스 브러시 기능

일반적으로 시간이 지남에 따라 균등하게 분산된 많은 수의 이벤트를 트리거하는 데 적합합니다.

소스 코드

흔들림 방지 기능:

function debounce(fn, wait) {
 var timer = null;
 return function () {
  var context = this
  var args = arguments
  if (timer) {
   clearTimeout(timer);
   timer = null;
  }
  timer = setTimeout(function () {
   fn.apply(context, args)
  }, wait)
 }
}
var fn = function () {
 console.log('boom')
}
setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发，之后每1000ms触发一次
setInterval(debounce(fn,2000),1000) // 不会触发一次（我把函数防抖看出技能读条，如果读条没完成就用技能，便会失败而且重新读条）

함수를 반환하는 이유는 흔들림 방지 자체가 함수 수정에 가깝기 때문에 함수 커링을 하게 되었습니다. 내부에도 Closure가 사용되며, Closure의 변수는 타이머이다.

Function throttling

function throttle(fn, gapTime) {
 let _lastTime = null;
 return function () {
 let _nowTime = + new Date()
 if (_nowTime - _lastTime > gapTime || !_lastTime) {
  fn();
  _lastTime = _nowTime
 }
 }
}
let fn = ()=>{
 console.log('boom')
}
setInterval(throttle(fn,1000),10)

간단한 기능 조절을 구현한 사진입니다. 결과는 1초에 한 번 붐입니다.

위 내용은 앞으로 모든 분들께 도움이 되기를 바랍니다. .

관련 기사:

js의 객체에 배열을 추가하는 방법

gulp를 사용하여 전체 프로젝트 프로세스를 만드는 방법

axios를 사용하여 vue에 파일 업로드

JavaScript에서 이미지를 더 크게 만드는 방법

위 내용은 JS의 기능 조절 및 기능 안정화(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!