Some calculations and processing in the browser are much more expensive than others. For example, DOM operations require more memory and CPU time than non-DOM interactions. Trying to do too many DOM-related operations in succession may cause the browser to hang and sometimes even crash. This is easy to occur especially when using the onresize event handler in IE. When the browser is resized, the event is triggered continuously. If you try to perform DOM operations inside the onresize event handler, its high frequency changes may crash the browser.
The basic idea behind function throttling is that certain code cannot be executed repeatedly without interruption. The first time the function is called, a timer is created, and the code is run after the specified time interval. When the function is called the second timer, it clears the previous timer and sets another one. If the previous timer has been executed, this operation has no meaning. However, if the previous timer has not been executed, it is actually replaced with a new timer. The purpose is to execute only after the request to execute the function has been stopped for a period of time.
function throttle ( method , context ){ clearTimeout ( method.tId ); method.tId = setTimeout ( function () { method.call ( context ); } , 100); }Application example:
Assuming that there is a <div/> element that needs to keep its height always equal to its width, it can be encoded as follows:
function resizeDiv(){ var div = document.getElementById("mydiv"); div.style.height = div.offsetWidth + "px"; } window.onresize = function(){ throttle(resizeDiv); }Here, the resize function is put into a separate function called resizeDiv, and the onresize event handler calls throttle() and passes in the resizeDiv function instead of directly calling resizeDiv(). In most cases, users cannot feel the change, although the calculations saved to the browser may be very large.
Below are the additions from other netizens
Today, we mainly write about the function throttling we need in our daily work. Some friends may not be aware of function throttling. In fact, in work, many scenarios require us to throttp://www.sub.com. The most common are screen resize, and touchmove or scroll events. I don’t know if I have read the articles I wrote before! jquery determines the sliding direction of the page scrollbar and touchmove. When you use these examples, you will find that the page keeps triggering touchmove or scroll because there is no need to repaint the page, so I am not using the javascript function to throttle here. However, when we use window.onresize, the resize event will be triggered continuously! This will be related to the page repainting problem. Therefore, when resize the window, we recommend that you use function throttling!
Introduction to throttling of javascript functions
If you feel overwhelmed by a large piece of text on me, it doesn’t matter. I’ll give you a brief example to illustrate the function throttling here! For example when we use
$(window).resize(function(){ console.log("haorooms window resize"); })You will find:
It will be output many times here. We simply narrow the window and it will keep triggering!
In this way, when div is often used, the page will be redrawn continuously. If you encounter IE with a relatively low version, the browser may crash! To avoid this, we can use the function throttling method. The basic idea is: when the function is called for the first time, we create a timer, run the code after the specified time interval, and when the second time is called, we will clearly understand the previous timer and reset one. If the previous timer has been executed, then this operation is not intentional. If the timer has not been executed, it will be replaced with a new timer. The purpose is to execute the function after it has been stopped for a period of time.
The object method can be written as follows:
var haoroomstest={ timeoutId:null, performProcessing:function(){ console.log("resize"); }, process:function(){ clearTimeout(this.timeoutId); var that=this; this.timeoutId=setTimeout(function(){ that.performProcessing(); },500) } }After this, we use:
$(window).resize(function(){ haoomstest.process(); })
This will reduce requests, reduce dom redrawing, and achieve the purpose of throttling!
Other ways of function throttling
In addition to the way we use objects, other methods and methods of function throttling are also introduced online and in the information. I will briefly introduce several below!
Function method one
function throttle(method,context){ clearTimeout(method.tId); method.tId=setTimeout(function(){ method.call(context); },100); }We use
function resizeDIv(){ console.log("harooms") } $(window).resize(function(){ throttle(resizeDIv) })The same effect as the above object!
Function method two
There is also a more popular way to ban money online, so I will write about it here!
function throttle(method,delay){ var timer=null; return function(){ var context=this, args=arguments; clearTimeout(timer); timer=setTimeout(function(){ method.apply(context,args); },delay); } }Then you can write this:
function resizeDIv(){ console.log("haorooms") } window.onresize=throttle(resizeDIv,500);New demand
When we do fuzzy search intelligent association prompts, we will bind the keyup event on the input. But I don’t want to trigger it so often, so there will be problems using the above method. Therefore, the above function is slightly changed, as follows:
function throttle(method,delay,duration){ var timer=null, begin=new Date(); return function(){ var context=this, args=arguments, current=new Date();; clearTimeout(timer); if(current-begin>=duration){ method.apply(context,args); begin=current; }else{ timer=setTimeout(function(){ method.apply(context,args); },delay); } }}This way the triggering will not be as frequent as before!