js 와 React Hooks 의 떨 림 방지 와 절 류

개념 떨 림 방지: 연속 호출 후 일정 시간 에 한 번 실 행 될 때 까지 기 다 립 니 다. 만약 에 대기 시간 내 에 다시 촉발 되면 일정 시간 동안 절 류 를 다시 기 다 립 니 다. 연속 호출 은 지 정 된 시간 내 에 한 번 만 실 행 됩 니 다.
이들 의 목적 은 모두 촉발 횟수 를 줄 이 고 성능 과 효율 을 확보 하 는 것 으로 업무 장면 과 수요 의 차이 에 있다.떨 림 방지 와 절 류 를 촉발 할 수 있 는 사건 은 onscroll, onmouseMove, onChange, onResize 등 이 있 습 니 다.
구체 적 으로 어떻게 실현 되 는 지 는 코드 를 보면 이해 하기 쉽다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  ：          </title>
</head>
    <body style="height:1400px;">
        <script>
            'use strict'
            function debounce(fn,delay){
                var  timer; //        
                return function(...args) {
                    if(timer){
                        clearTimeout(timer)
                    }
                    timer = setTimeout(() => {
                        fn(...args);
                        timer = null;
                    },delay);
                }
            }
            //    
            function mouseMove  (event) {
                let e = event || window.event;
                console.log('      ：',e.clientX,e.clientY);
            }
            window.onmousemove = debounce(mouseMove,1000);
        </script>
    </body>
</html>

react hooks 의 떨 림 방지

function useDebounce(fn, delay) {
  const { current } = useRef(null);
  //        ，         hooks，  debounce       timer          
  //              DOM ，    hooks   
  return 　function (...args) {
    if (current.timer) {
      clearTimeout(current.timer);
    }
    current.timer = setTimeout(fn.apply(this,...args), delay);
  }
}

주의해 야 할 부분: 1. 마지막 호출 함 수 를 패키지 로 저장 합 니 다. 2. 패키지 에 this 의 지향 과 매개 변수 전달 을 고려 해 야 합 니 다. 3. 부분 변수의 인용 을 제거 하고 메모리 유출 을 차단 합 니 다.
절 류 는 두 가지 처리 방법 이 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  ：           </title>
</head>
<body style="height:1400px;">
    <script>
        'use strict'
        //   ：           
        function throttle(fn,delay){
            let valid = true;
            return function() {
                if(!valid){
                    return false;
                }
                valid = false;
                setTimeout(() => {
                    fn();
                    valid = true;
                }, delay);
            }
        }

        function showTop  () {
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            console.log('     ：' + scrollTop);
        }
        window.onscroll = throttle(showTop,1000);


        //   ：           ****************************************************************************************
        function throttle1(fn,delay){
            let startTime = new Date();//    ，         
            return function() {
                let endTime = new Date();
                if(endTime - startTime >= delay){
                    fn();
                    startTime = endTime;
                }
            }
        }

        function mouseMove  (event) {
            let e = event || window.event;
            console.log('      ：',e.clientX,e.clientY);
        }
        window.onmousemove = throttle1(mouseMove,1000)
    </script>
</body>
</html>

react hooks 의 흐름 조절

function useThrottle(fn, delay) {
   const { current } = useRef(null);//      hook       
     return function (...args) {
         if (!current.timer) {
           　current.timer = setTimeout(() => {
           　  delete current.timer;
           　}, delay);
           　fn(...args);
         }
     }
 }

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

js 와 React Hooks 의 떨 림 방지 와 절 류

개념 떨 림 방지: 연속 호출 후 일정 시간 에 한 번 실 행 될 때 까지 기 다 립 니 다. 만약 에 대기 시간 내 에 다시 촉발 되면 일정 시간 동안 절 류 를 다시 기 다 립 니 다. 연속 호출 은 지 정 된 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

js 와 React Hooks 의 떨 림 방지 와 절 류

좋은 웹페이지 즐겨찾기