JavaScript function throttling

Article reference

http://www.cnblogs.com/LuckyWinty/p/5949970.html

https://segmentfault.com/a/1190000002764479

 

What is function throttling

Personal understanding: The flat rate triggered by a certain event in the browser (such as the onscroll event) is very high. If the logic of processing the event is executed every time, it will consume a lot of CPU resources and cause the browser to freeze, so it needs to be executed only within a period of time. The function of the last function is called function throttling.

 

Case 1: Execute once within the specified time range

n=0;
        function resizehandler(){
            console.log(new Date().getTime());
            console.log(++n);
        }
		
		function throttle(method,context){
            clearTimeout(method.tId);
            method.tId=setTimeout(function(){
                method.call(context);
            },500);
        }

        window.onresize=function(){
            throttle(resizehandler,window);
        };

 

Case 2: Must be executed once in the specified range

 

n=0;
function resizehandler(){
	console.log(new Date().getTime());
	console.log(++n);
}

function throttle(method ,delay, duration){
	var timer = zero;
	var begin = new Date();
	return function(){
		var context = this;
		var args = arguments;
		var current = new Date();
		clearTimeout(timer);
		if(current-begin>=duration){
			method.apply(context,args);
			begin=current;
		}else{
			timer=setTimeout(function(){
				method.apply(context,args);
			},delay);
		}
	}
}
window.onresize=throttle(resizehandler,100,500);