A concept,

These two things are for project optimization, there is no specific definition of the official, they are mainly to solve some events in a short period of time to continuously execute the poor performance and huge memory consumption and other problems; Such events, such as scroll keyUp mousemove resize and so on, are triggered continuously in a short period of time, which will consume a lot of performance, especially some operations to change the DOM structure;

Throttling is very similar to debounce, in that it is the number of times such events are triggered before the specified event changes from constantly triggering to a specified time;

The throttle (throttle)

Throttling popular to explain for example we tap water, the valve is opened, the water stream flowing downwards, this takes the fine traditional virtues of diligence and frugality, we have to turn down the faucet, it is best if we will according to certain rules in a certain time interval drip drip down, this,,, okay, this is our concept of throttling; For a function, use the setTimeout method, given two times, the following time minus the previous time, to reach the given time to trigger the event once, so this is too general, let’s look at the following function, let’s take scroll as an example;

/** * I just wrote **/<style>* {padding:0;margin:0; }.scroll-box{
        width : 100%;
        height : 500px;
        background:blue;
        overflow : auto;
    }    
    .scroll-item{
        height:1000px;
        width:100%;
    }
</style>------------------------ /** The DOM structure is given; * * /<div class="scroll-box">
    <div class="scroll-item"></div>
</div>------------------------ /** mainly look at js, for simplicity I use JQ to write **/<script>
    $(document).ready(function(){
        var scrollBox = $('.scroll-box');
        // Call throttle, passing in the method and the specified time;
        var thro = throttle(throFun,300);
        // Trigger event;
        scrollBox.on('scroll' , function(){
            // Call the execution function;
            thro();
        })

        // Encapsulate function;
        function throttle(method,time){
            var timer = null;
            var startTime = new Date(a);return function(){
                var context = this;
                var endTime = new Date(a);var resTime = endTime - startTime;
                // Determine whether the time is greater than or equal to the time we give the execution function;
                if(resTime >= time){
                    method.call(context);
                    // Reset the initial time after executing the function, equal to the time of last firingstartTime = endTime; }}}function throFun(){
            console.log('success'); }})</script>Copy the code

Through the above function, we can achieve the effect of throttling, in the specified 300 milliseconds triggered once, of course, can be customized, according to the demand;

If [debounce]

Before writing code, let’s clear up the concept of image stabilization, don’t know if you have done on both sides of the computer terminal suspended advertising window so one thing, when we drag the scroll bar, the advertisement window on both sides of the scroll bar will drag, and constantly try to stay in the middle, and then you’ll see the two Windows, constantly shake shake;

Generally this is called “debounce” and what we have to do is prevent this kind of wobble, called “debounce”;

The idea here is that when we drag the window position on both sides to re-calculate, so that it will appear very smooth, looking very comfortable, the most important operation DOM structure is greatly reduced the number of times;

Optimized page performance and reduced memory consumption, otherwise you like Internet Explorer, the older version of the browser, you might just jump

To put it in writing, the function will not execute until the event is over, and when the event is over, we give it a delay time, and then it will execute the function after the given delay time, which is the anti-shake function;

Look at the code:

// Replace the throttle function with debounce;function debounce(method,time){
    var timer = null ;
    return function(){ var context = this; // Clear the timer before the function is executed; clearTimeout(timer); timer =setTimeout(function(){ method.call(context); },time); }}Copy the code

The idea is that before the function is executed, we first clear the timer, if the function is always executed, it will continue to clear the method in the timer, until we finish the operation, the function will execute;

In fact, there are many ways to write, the main problem is the idea, you write more, naturally know;

use

  1. When we do keyup like background request check, we can use the anti-shake function, otherwise we will request once every time we press the keyboard, the request is too frequent, so when we finish pressing the keyboard to request, the request is much less, the performance naturally needless to say;
  2. When resize the window, we can use anti-shake technology or throttling;
  3. Mousemove Mouse movement event we can use either anti-shake or throttling;
  4. Scroll bar triggered events, of course, can be used to prevent or throttle;
  5. Continuous high frequency events can be solved by these two ways to optimize page performance;

The specific use of which is more appropriate, mainly depends on your business needs, well, this is the end of this, thank you for reading;

Hand is not easy, summary is not easy, reproduced please indicate the source, thank you;