함수 절류 총결산

함수 절류가 window를 호출합니다.onresize 이벤트 시, 작업이 빈번하면 DOM이 매우 소모되기 때문에, 이 경우 타이머를 통해 이 함수를 절약할 수 있습니다.함수 절류 뒤의 기본 사상은 어떤 코드는 끊임없는 상황에서 연속적으로 반복해서 집행해서는 안 된다는 것이다.함수를 처음 호출하여 타이머를 만들고 지정한 간격 후에 코드를 실행합니다.두 번째 호출 함수는 이전의 타이머를 지우고 다른 함수를 설정합니다.만약 이전 타이머가 실행되었다면, 이 조작은 아무런 의미가 없을 것이다.그러나 이전 타이머가 실행되지 않으면 새 타이머로 바꿉니다.함수 실행을 위한 요청이 일정 시간 멈춘 후에만 실행됩니다.다음은 이 모델의 기본 형식입니다.

var processor = {
	timeoutId: null,
	//         
	performProcessing: function(){
		//       
	},
	//         
	process: function(){
		clearTimeout(this.timeoutId);
		var that = this;
		this.timeoutId = setTimeout(function(){
			that.performProcessing();
		},100)
	}
}
processor.process();

프로세스 () 는 모든 처리에서 호출해야 하는 것을 초기화합니다.performProcessing()은 실제로 완료해야 할 처리를 수행합니다.
이 모드는 throttle () 함수를 사용하여 타이머를 자동으로 설정하고 지울 수 있습니다. 예를 들어 다음과 같습니다.

function throttle(method,context){
	clearTimeout(method.tId);
	method.tId = setTimeout(function(){
		method.call(context);
	},100)
}

throttle() 함수는 두 개의 매개변수를 적용합니다.
4

method에서 실행할 함수 4

어느 역할 영역에서 실행합니까?
위의 함수는 이전에 설정한 타이머를 먼저 제거합니다.함수 절전의 구체적인 응용을 살펴보자.





    


    
       123
    
    
        var root = document.getElementById('root');
        function reszie(){
            console.log('offsetWidth',root.offsetWidth);
            root.style.height = root.offsetWidth + 'px';
            root.style.background = 'red';
        }
        window.onresize = function(){
            throttle(reszie);
        }
        //method       
        //context       
        function throttle(method,context){
            clearTimeout(method.tId);
            method.tId = setTimeout(function(){
                method.call(context);
            },1000)
        }

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

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

원본 js 랜덤 색상 생성

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

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

함수 절류 총결산

좋은 웹페이지 즐겨찾기