An overview of the

Strictly speaking, anti – shake and throttling is actually a performance optimization problem, because there are many scenarios used in daily development scenarios, some scenarios will be very expensive and even stuck if not used. So it will be used as one of the test points in some interviews.

In simple terms, you use a function to combine multiple computations (listens, operations) into one and perform them at a precise point of control.

Both anti-shake and throttling are designed to solve performance problems caused by firing a large number of functions in a short period of time

1. Debounce function

1.1 Function Effect

The function is executed only once within n seconds after the high-frequency event is triggered. If the high-frequency event is triggered again within n seconds, the time is recalculated

1.2 Application Scenarios

(1) After the user continuously enters a string of characters in the input box, only the last query Ajax request will be executed after the input, which can effectively reduce the number of requests and save request resources;

(2) Window resize, scroll events, constantly adjust the size of the browser window, or the corresponding event will be triggered when scrolling, so that it can only trigger once;

1.3 Function Implementation

Ideas:

Set a delayed call method each time an event is emitted, and cancel the previous delayed call method

Code display:

function Debounce(fn, delay) { let timer = null; Return function() {return function() {return function() {return function() {return function() {return function() { If (timer) {clearTimeout(timer)} timer = setTimeout(()=> {fn.apply(this, arguments)}, Function ajax(content) {console.log(' Ajax request '+ content)} let myInput = document.getElementById('debounce') let deAjax = Debounce(ajax, 500) myInput.addEventListener('keyup', function (e) { deAjax(e.target.value) })Copy the code

2. Throttle functions

2.1 Function Effect

High frequency events fire, but only execute once in n seconds, so throttling dilutes the frequency of the function’s execution

2.2 Application Scenarios

(1) The mouse continuously triggers an event (such as clicking), only triggering once per unit of time;

(2) In the infinite loading scenario of the page, the user should send ajax requests every once in a while while scrolling the page, rather than request data when the user stops scrolling the page;

(3) Monitor rolling events, such as whether to slide to the bottom to automatically load more, and throttle to judge;

2.3 Function Implementation

Ideas:

Return each time an event is emitted, if there is a delay function waiting to be executed

Code display:

Function Throttle(fn, delay) {let isRun = true return function() {// If (! isRun) { return false } isRun = false; setTimeout(() => { fn.apply(this, arguments); // After executing, change back to the initial value so that isRun = true is used next time; }, Function ajax(content) {console.log(' Ajax request '+ content)} let myInput = document.getElementById('throttle') let thAjax = Throttle(ajax, 1000) myInput.addEventListener('click', function (e) { thAjax(e.target.value) })Copy the code