preface

In front-end development, it is often the case that events are frequently called, which wastes performance resources. For example, listening for input will result in frequent calls of listener events when we only need the last input. Or the monitoring of the page scrolling event, when the page is scrolling, it will constantly trigger the scrolling event, it is easy to cause a lag, so I hope to trigger the scrolling event again every time, and so on. There are many such cases, the solution is to use a timer (setTimeout) for shaking or throttling. Before we do that, we need to know something about setTimeout and clearTimeout

SetTimeout, clearTimeout, set the return value of the timer to null

SetTimeout is to start a timer, and clearTimeout is to clear a timer. After the clear, the timer is completely destroyed. Setting the return value of the timer to NULL does not terminate the execution of the timer, but only reassigns its return value, and the timer still exists

Image stabilization

Application scenario: Continuous events that only need to trigger the last callback, for example:

  • The search box searches for input. The user only needs to type one last time before sending the request
  • Mobile phone number, email verification input detection
  • Window size Resize. Just after the window adjustment is complete, calculate the window size. Prevent repeated rendering.

The principle of anti-shake: if there is an operation in the interval, the new operation will be cleared; if there is no operation, the new operation will be triggered.

function debounce(fn, delay) { var timer = null; return function () { var _this = this; This var args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(function () {fn.apply(_this, args); // Apply to the object that called debounce, equivalent to _this.fn(args); }, delay); }; }Copy the code

The throttle

Throttling application scenarios: Perform a callback at intervals, for example:

  • Scroll to load, load more or roll bottom to listen
  • Google search box, search association function
  • Click submit frequently, and the form is submitted repeatedly

The principle of throttling: if there is an operation in the interval, no new operation will be triggered. If there is no operation, new operation will continue to be triggered. There are two ways to implement throttling: the first is a timer and the second is a timestamp. Another easy to understand example of throttling is the league of Legends flat A, no matter how fast you click, flat A is never affected by how often you click.

Function throttle(fn, delay) {var previous = 0; Previous return function() {var _this = this; var args = arguments; var now = new Date(); if(now - previous > delay) { fn.apply(_this, args); previous = now; }}}Copy the code
Function throttle (fn, delay) {var timer == null; return function () { var _this = this; var args = arguments; if (timer) { return; // clearTimeout} timer = setTimeout(function () {fn.apply(_this, args); timer = null; }, delay); }}Copy the code

The similarities and differences between anti-shake and throttling

Similarities:

Both can be implemented using setTimeout. The goal is to reduce the frequency of callbacks. Saves computing resources.

Difference:

Function stabilization, handling callbacks after a sequence of operations, using clearTimeout and setTimeout. Function throttling, used to improve performance during high frequency events that are executed only once at a time during a continuous operation. Function chattering focuses on events that are fired continuously for a certain period of time and only execute once last, while function throttling focuses on executing only once in a period of time.