What is function throttling?

What is function throttling?

Before the introduction, let's say the background. In front-end development, sometimes for the page binding resize event, or for a page element binding drag-and-drop event (its core is bound MouseMove), this event has a feature is that users do not have to make trouble, he in a normal operation, It is possible to trigger very many event binders in a short period of time. And you know, Dom operation is very cost-performance, this time, if you are bound to these events some operations DOM node operation, it will trigger a lot of calculations, in the user's opinion, the page may not respond to a moment, the page suddenly become card slow. Even under IE, if you bind a Resize event for more DOM operations, its high frequency may directly cause the browser to crash.

The principle of function throttling

The principle of function throttling is very simple, it is estimated that everyone thought, that is the timer. When I trigger a time, settimout let the event delay a while, if the event is triggered in this interval, then we clear off the original timer, and then settimeout a new timer delay to execute, and so on.

varMain ={changescreen: {init:function() {            var_this =This ;            _this.obtainscreen ();        _this.resizescreen (); }, Obtainscreen:function() {            varScreenWidth, UA=navigator.userAgent.toLocaleLowerCase (), v=$.browser.version, $resizeScreen= $ ("#resizeScreen" ); ScreenWidth= Window.innerwidth?Window.innerWidth:document.documentElement.clientWidth; if(Ua.indexof ("MSIE") >-1 && +v < 10) {if(ScreenWidth >= 1540) {$resizeScreen. addclass ("W1240" ); } Else{$resizeScreen. Removeclass ("W1240" ); }            }        },        //The principle of function throttling is very simple, it is estimated that everyone thought, that is the timerThrottle:function(FN, delay) {varTimer =NULL; return function() {                varContext = This, args =arguments;                Cleartimeout (timer); Timer= SetTimeout (function() {fn.apply (context, args);            }, delay);        }; }, Resizescreen:function() {            var_this =Giftcommon.changescreen; Window.onresize= _this.throttle (_this.obtainscreen, 100 ); }    }};

What is function throttling?