The throttling function of JavaScript performance optimization

In our work often have such a demand, pull-up loading to implement the infinite load list of data such a function, this time the small partners may feel this function for a few minutes, so, the following code is mighty out

Window.addeventlistener (' scroll ', function () {    //To determine if the scrollbar has},false to the bottom)

It looks like there's nothing wrong with the code above, and then we'll add another piece of code to this code to see

Window.addeventlistener (' scroll ', function () {//To determine if the scrollbar has no to the bottom        console.log (' aaa ')},false)

Then we open the Chrome browser control and test the scrolling event, where the callback function executes so many times

There is a problem, do we need the code to execute so frequently?

The answer must be: No, this writing is obviously very consumption of mobile phone performance, mobile phone power consumption will also accelerate, so we need to feel this problem, then the throttle function came

Throttle function: As the name implies is a function to save performance, his implementation principle is to open a timer, if in the specified range of this timer, continue to trigger the function, then this line is not the timer of some code, if the timer beyond the specified range, will be triggered.

Isn't that a good idea? Let's change the code above

<script type= "Text/javascript" >var timer = nullwindow.addeventlistener (' scroll ', function () {// Determine if the scrollbar has no to the bottom cleartimeout (timer) timer = setTimeout (function () {console.log (' BBB ')},50) console.log (' AAA ')},false) </script>

　

And then we'll look at the results of our execution.

Have not seen Console.log (' BBB ') execution of a few times, so to solve one of our performance problems, is not very simple!!!

Throttle function is not only used in the application scenario of pull-up loading, window.onresize event is also applicable, very simple, I hope you can be bold in the future work of the application

The throttling function of JavaScript performance optimization