preface

During the interview, we were often asked about debounce and throttle, which were problems we encountered during the project. If users clicked too much, they would send requests to the server constantly, which would cause a serious waste of resources.

Image stabilization

  • The concept of anti-shock is to execute a callback n seconds after the event is triggered, and if it is triggered again within n seconds, it will be retimed.

To avoid wasting resources, we only need to perform the last operation request.

  • Let’s say we have a request, the user needs to search for something, and we need to get it to send the request.

  • The code is as follows:

    let input = document.querySelector('input') let time = null; inp.oninput = function () { if (! time == null) { clearTimeout(time) } time = setTimeout(() => { console.log(this.value); }}, 500)Copy the code

We first write an input box, define a global variable timer time, will be executed when the oninput events trigger the operation of the timer, print the value of user input, at this time inside the judgment we write a clear timer operation, can form the effect, if also in 5 milliseconds in the input, will eliminate the last timer, Then you create a new one, and it will take 500 milliseconds for the value to be printed, at which point you’re done. In order for others to understand your code better, we need to optimize, no longer set time as a global variable, need to write it as a separate function.

  • The code is as follows:
let inp = document.querySelector('input') inp.oninput = debounce(function () { console.log(this.value); }, 500) function debounce(fn, delay) {// let time = null return function () {if (time! == null) { clearTimeout(time) } time = setTimeout(() => { fn.call(this) }, delay) } }Copy the code

After optimization, let’s see, if fn calls directly, the above this will point to the global, so we need to use call to change this to point back. After improvement, we see the effect:

The throttle

The concept of throttling: specifies a unit of time within which only one event callback can be executed. If an event is triggered multiple times within the same unit of time, only one event can take effect.

  • Throttling is about controlling the number of executions

Here’s the code: CSS style

body { height: 2000px; }Copy the code
Window.onscroll = throttle(function () {console.log('hello world'); }, 500) function throttle(fn, Delay) {let flag = true return function () {if (flag) {setTimeout(() => {fn.call(this) flag = true }, delay) flag = false } } }Copy the code

As long as flag is true, the timer will be executed; otherwise, it will be set to false. Finally, the execution of its function will be controlled within 500 milliseconds, and the effect of throttling can be achieved to control the execution times of high frequency events.

Throttling effects are as follows:

Conclusion:

Anti – shake is to prevent resource waste, excessive requests, resulting in resource waste. Throttling is the execution of a certain number of times in a specified time

The difference is that function throttling ensures that a real event handler is executed within a specified period of time, no matter how frequently the event is triggered, whereas function stabilization only fires once after the last event.

Thank you for reading

The reference video comes from xiaozhou report of station B

Please leave comments and discuss