Today we’re going to talk about debounce and throttle, and we’re going to talk about throttle and debounce in a very simple way

The concept is introduced

First, consider the concept of debounce and throttle.

Function anti-shock debounce

  1. Concept: an event stops firing for a specified time before executing a function. If it is fired again at that time, no retiming is triggered.
  2. For example: start dragging map, set 1000ms trigger request data, if WITHIN 1000ms I stop dragging, then directly request data, if within 1000ms I trigger drag event again, then re-timing, no trigger request.

Function throttle:

  1. Concept: A function must be executed only once in a specified interval
  2. For example: start dragging the map, set 500ms to trigger the request data, within 500ms whether I stop or continue dragging, 500ms will trigger once.

The scene is introduced

Function anti-shock debounce

  1. Search: the most common input, continuous input, will lead to continuous requests, you can use anti-shake to save request resources.
  2. Resize: Resize events are triggered when resizing the browser window. You can control the number of resize events by using anti-shake
  3. Map dragging: In the process of dragging, you need to load the current viewable overlay data. If you keep dragging, multiple requests will be triggered, resulting in map lag. You can use anti-shake to control the number of requests

Function throttle:

  1. Mouse click: repeated clicking will cause repeated trigger, you can use throttling to control it to trigger only once in a specified time
  2. Scroll event: page data is too long, you can control the scroll to load data within a specified time by throttling

case

Input cases are available on the web, all of which are well written, so you can use Google/BMap drag as an example, and use Debounce and Throttle to implement it

Let’s take a look at what happens when a map is dragged without throttling (the action triggered by the request is replaced by console.log).

const map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.404.39.928), 15);
map.enableScrollWheelZoom(true);
// dragend: triggered when you stop dragging the map
map.addEventListener('dragend'.(e: any) = > {
    console.log('Drag to stop triggering', e.latlng);
});
Copy the code

So let’s see what happens

Can see from the graph, drag the stop will trigger the request, but sometimes, we are not drag to the destination, but the phone’s screen to drag the area is limited, so must stop continuing to drag, it is actually quite a waste of resources, and if the time is too long also have an impact on performance, this is not a good way.

If you case

First of all, we use the way of anti-shake to solve this problem, on the code:

// debounce.ts
const debounce = (func: Function, delay: number) = > {
    let timer: any = null;
    // Accept all arguments to the function
    return (. args: any[]) = > {
        clearTimeout(timer);
        timer = setTimeout(() = >{ func(... args); timer =null;
        }, delay);
    };
};

/ / call
const map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.404.39.928), 15);
map.enableScrollWheelZoom(true);

const debounceGet = debounce((val: any) = > {
	console.log('Debounce - Drag map', val.latlng);
}, 1000);
map.addEventListener('dragend'.(e: any) = > {
    debounceGet(e);
});
Copy the code

So let’s see what happens

As can be seen from the figure, we do not request data every time the drag stops. When the drag stops, the data will be requested for 1000ms. If the drag continues for 1000ms, the data will not be requested.

Throttling case

First we use throttling method to solve this problem, code:

// throttle.ts
const throttle = (func: Function, delay: number) = > {
    let last = 0;
    let timer: any = null;
    return (. args: any[]) = > {
        const curr = new Date().getTime();
        clearTimeout(timer);
        if(last && curr - last >= delay) { func(... args); last = curr; }else {
            timer = setTimeout(() = > {
                func(...args);
                last = curr;
            }, delay);
        }
    };
};

/ / call
const map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.404.39.928), 15);
map.enableScrollWheelZoom(true);

const throttleGet = throttle((val: any) = > {
    console.log('Throttle-drag map', val.latlng);
}, 1000);
map.addEventListener('dragend'.(e: any) = > {
    throttleGet(e);
});
Copy the code

So let’s see what happens

As you can see from the figure, not every time we stop dragging data is requested, but every 1000ms during the drag.

The above is all the content of anti – shake and throttling, we can decide which to use according to the needs in the actual development process, I hope this article is helpful to you ~

Pay attention to UU

Pay attention to the public number [front-end UU], regular access to good articles recommended yo ~