JS 의 떨 림 방지 와 절 류 및 작용 에 대한 상세 한 설명

3999 단어 js떨 림 방지절 류
콘 셉 트
함수 떨 림 방지(debounce)는 일정한 시간 내 에 동작 이 연속 적 으로 자주 촉발 되 는 상황 에서 동작 은 한 번 만 실 행 됩 니 다.즉,호출 동작 이 n 밀리초 가 지나 야 이 동작 을 수행 할 수 있 습 니 다.만약 에 n 밀리초 안에 이 동작 을 다시 호출 하면 실행 시간 을 다시 계산 하기 때문에 짧 은 시간 동안 의 연속 동작 은 영원히 한 번 만 실 행 됩 니 다.예 를 들 어 스프링 을 손가락 으로 계속 누 르 면 손 을 놓 을 때 까지 튕 기지 않 는 다.
함수 절 류 는 일정한 시간 내 에 실 행 된 작업 을 한 번 만 수행 하 는 것 을 말한다.즉,하나의 실행 주 기 를 미리 설정 하고 동작 을 호출 하 는 시간 이 실행 주기 보다 크 면 이 동작 을 집행 한 다음 에 다음 주기 에 들 어 가 는 것 을 말한다.비교적 이미지 있 는 예 는 수도 꼭 지 를 물 방울 형식 으로 흘러 나 올 때 까지 조 이면 시간 간격 을 발견 할 수 있다.물 한 방울 이 흘러 나 올 겁 니 다.
함수 절 류(throttle)와 함수 떨 림 방지(debounce)는 모두 함수 의 실행 빈 도 를 제한 하기 위해 함수 의 트리거 빈도 가 너무 높 아서 발생 하 는 응답 속도 가 트리거 빈 도 를 따라 가지 못 하고 지연,가사 또는 멈 추 는 현상 이 나타난다.
다음은 예시 코드 를 통 해 떨 림 방지 와 절 류 를 살 펴 보 겠 습 니 다.
떨 림 방지 가 뭐야?and 무엇이 절 류 입 니까?같이 즐겁게 공부 합 시다.
먼저 떨 림 방지 가 무엇 입 니까?즉,일정한 시간 안에 사건 이 한 번 만 발생 하 는 것 입 니 다.예 를 들 어 button 단 추 를 누 르 면 1 초 안에 싱글 30 년 동안 손 으로 몇 번 을 클릭 하지 않 아 도 그 는 한 번 만 촉발 합 니 다.예 를 들 어 페이지 에서 onkey Up 감청 사용자 가 input 상자 에 입력 한 것 을 사용 하면 사용자 가 6 을 누 르 고 놓 지 않 으 면 감청 사건 이 계속 발생 하 는 것 이 아니 라 일부 성능 을 낭비 하 는 것 입 니 다.그러면 우 리 는 특정한 사건 에서 감청 을 했 습 니 다.즉,1 초 후에 당신 이 6 을 얼마나 입력 했 는 지 다시 한 번 보 겠 습 니 다.그러면 훨씬 가 볍 지 않 습 니까?ok,설명 이 잘 되 었 으 면 코드 를 보 세 요.더욱 뚜렷 해 집 니 다.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>  </title>
</head>
<body>
 <button id="debounce">  ，  ，  </button>
 <script>
 window.onload = function () {
  let obtn = document.getElementById('debounce'); //    
 obtn.addEventListener('click',debounceHandle(debounce),false); //      
 }

 //    
 function debounceHandle (fn) {
  let timer = null;
  return function () {
  clearTimeout(timer); //            
  timer = setTimeout(function(){ //             
   fn.call(this,arguments);
  },300)
  }
 }

 //    
 function debounce() {
  console.log('  ，  ，  ');
 }
 </script>
</body>
</html>
위의 함수 즉 300 밀리초 내 에 한 번 의 사건 만 발생 합 니 다.결론:떨 림 방지 란 임무 가 빈번하게 촉발 되 는 상황 에서 임무 가 촉발 하 는 간격 이 지정 한 간격 을 초과 할 때 만 임 무 를 수행 하 는 것 이다.
그 다음 에 절 류 는 무엇 입 니까?만약 에 한 페이지 에 여러 장의 그림 이 있다 면 게 으 른 로 딩 기술 을 사용 할 수 있 습 니 다.게 으 른 로 딩 은 바로 스크롤 바 의 위 치 를 감청 하 는 것 입 니 다.그러면 사용자 가 계속 굴 러 가면 사건 감청 이 계속 촉발 되 고 낭비 적 인 에너지 입 니 다.그러면 절 류 는 일정 시간 간격 으로 사건 을 일 으 키 는 것 이다.말 이 많 지 않 으 니 코드 부터 보 세 요.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>  </title>
 <style>
 div {
  height: 5000px;
 }
 </style>
</head>
<body>
 <div>  ,  ,  </div>
 <script>
 window.onload = function () {
  window.addEventListener('scroll',throttleHandle(throttle),false); //      
 }

 //    
 function throttleHandle (fn) {
  let timer = null,
   booleanVal = true; //            
  return function () {
   if (!booleanVal) {
   return 
   } //        ，     ，      false
   booleanVal = false;
   //     ，    
   timer = setTimeout(function() {
   fn.apply(this,arguments);
   booleanVal = true; //           
   },300)
  }
 }

 //    
 function throttle() {
  var scrollNum = document.documentElement.scrollTop || document.body.scrollTop;
  console.log(scrollNum);
 }
 </script>
</body>
</html>
이렇게 하면 특정한 작업 장면 에서 우 리 는 떨 림 방지 와 절 류 를 사용 하여 불필요 한 손실 을 줄 일 수 있다.마지막 으로 한 가지 질문 을 드 리 겠 습 니 다.앞에서 불필요 한 손실 을 초래 했다 고 언급 했 는데 어떤 손실 입 니까?
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 JS 의 떨 림 방지 와 절 류 및 역할 에 대한 상세 한 설명 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
위 챗 2 차 공유 오류 보고 invalid signature 문제 및 해결 방법
SpringBoot 에서 Logback 관리 기록 로 그 를 사용 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage