Clever Use of setTimeout in JS front-end function throttle _ javascript skills

This article mainly introduces the clever use of setTimeout in JS. For more information about front-end function throttling, see What is function throttling?

In simple terms, function throttling does not require the function to be called continuously in a short period of time. For example, when the window is scaled, other operation functions are often executed, for example, if an ajax request is sent, multiple requests may be sent consecutively when the window is scaled. This is not what we want, or we can use function throttling to perform a common switch between the mouse and the tab. Sometimes, when the mouse moves continuously and quickly, the system will flash. As we all know, DOM operations consume a lot or affect the performance. If you bind a large number of dom operations to the elements during Window Scaling, it will lead to a large number of continuous computations, for example, in IE, too many DOM operations may affect the browser performance, or even seriously, cause the browser to crash. In this case, we can use function throttling to optimize the code ~

The basic principle of function throttling:

When a timer is used, the execution of the function is delayed first. For example, if setTomeout () is used to execute the function after a delay of a period of time, if other events are triggered during this period, we can use clearTimeout () to clear the timer, and then setTimeout () A new timer is delayed for a while.

Recently, a team is busy working on a project. There is such a page, which is developed in the traditional mode (why doesn't it use React). It has many DOM operations, and then its performance is relatively poor, especially when you zoom in the window, the terrible thing is happening, and sometimes the browser is paralyzed. Why?

Because there are many DOM operations on the page, the function execution is triggered when the window is scaled to every frame, and DOM operations are re-performed continuously. This overhead on the browser is very large. Since the browser will re-calculate the DOM when the window is scaled, why can't we delay the DOM computing? Let the window be scaled and re-calculated, in this way, the browser overhead will be saved and the optimization effect will be achieved?

Knowledge preparation

1. setTimeout (code, millisec) is of course the main character in this article.

The setTimeout () method is used to call a function or computing expression after a specified number of milliseconds.

Code required. The JavaScript code string to be executed after the function to be called.

Millisec required. The number of milliseconds to wait before executing the code.

Note: setTimeout () is executed only once. If you want to call it multiple times, use setInterval () or let the code itself call setTimeout () again ().

It is widely used in timer, slideshow, animation effect, automatic scrolling, and so on.

2. clearTimeout (id_of_setTimeout)

The id_of_settimeout parameter is the ID value returned by setTimeout. This value identifies the delayed execution code block to be canceled.

3. fun. apply (thisArg [, argsArray])

The apply () method calls a function when specifying the this value and parameter (the parameter exists in the form of an array or a class array object ).

The syntax of this function is almost the same as that of the call () method. The only difference is that the call () method accepts a list of parameters while the apply () method () it accepts an array containing multiple parameters (or a class array object ).

Parameters

ThisArg

This value specified when the fun function is running. It should be noted that the specified this value is not necessarily the true this value during function execution. If this function is in non-strict mode, if it is null or undefined, it will automatically point to the Global Object (window object in the browser), and the value is the original value (number, String, Boolean value) this will point to the automatic packaging object of the original value.

ArgsArray

An array or a class array object. The array elements are passed as independent parameters to the fun function. If the value of this parameter is null or undefined, it indicates that no parameter is required. The class array object can be used from ECMAScript 5.

When calling an existing function, you can specify an this object for it. This indicates the current object, that is, the object that is calling this function. With apply, you can write this method only once and inherit it from another object, instead of re-writing this method in the new object.

4. fun. call (thisArg [, arg1 [, arg2 [,...])

This method calls a function or method when a specified this value and several specified parameter values are used.

Parameters

ThisArg

This value specified when the fun function is running. It should be noted that the specified this value is not necessarily the true this value during function execution. If this function is in non-strict mode, the value of this specified as null and undefined automatically points to the Global Object (window object in the browser), and the value is the original value (number, String, Boolean value) this will point to the automatic packaging object of the original value.

Arg1, arg2 ,...

The list of specified parameters.

When calling a function, you can assign a different this object. This references the current object, that is, the first parameter of the call method. By using the call method, you can borrow methods from another Object, such as Object. prototype. toString. call ([]) is an Array Object that uses methods on the Object.

Purpose:

Call the parent constructor using the call Method

Call an anonymous function using the call Method

Use the call method to call an anonymous function and specify the context's 'eas'

Here is an additional remark:

Apply is very similar to call (). The difference is that it provides parameters. Apply uses an array of parameters instead of a list of parameters. Apply can use array literal (array literal), such as fun. apply (this, ['eid', 'banas']), or an array object, such as fun. apply (this, new Array ('hat', 'bananas ')). You can also use the arguments object as the argsArray parameter. Arguments is a local variable of a function. It can be used as all unspecified parameters of the called object. In this way, you do not need to know all the parameters of the called object when using the apply function. You can use arguments to pass all parameters to the called object. The called object is responsible for processing these parameters.

From ECMAScript 5th, you can use an array of classes of any type, that is, as long as there is an integer attribute in the range of the length attribute and [0... length. For example, you can use NodeList or an object defined in the format of {'length': 2, '0': 'eat', '1': 'banas.

The difference between the call and apply methods is that, starting from the second parameter, the call method parameters are passed to the borrowed method as parameters in turn, while the apply method directly places these parameters in an array before passing them, finally, the list of parameters of the borrow method is the same.

Application Scenario: call is available when the parameters are clear. When the parameters are not clear, apply to arguments.

Here is an example.

As we all know, onscolll, onresize and so on are very performance-consuming, and numbers are printed during Window Scaling.

var count = ;window.onresize = function () {count++;console.log(count);}

Scale the browser window size in the chrome browser and print it as follows:

This is obviously not what we want. If we change it to an ajax request, the window will be scaled once and the ajax request will be triggered multiple times in a row. Next, we will try the function throttling operation; of course, just add a settimeout () timer,

First Encapsulation Method

var count = ;function oCount() {count++;console.log(count);}window.onresize = function () {delayFun(oCount)};function delayFun(method, thisArg) {clearTimeout(method.props);method.props = setTimeout(function () {method.call(thisArg)}, )}

Second Encapsulation Method

Construct a closure and use the closure to form a private scope to store the timer. timer is introduced by passing parameters.

var count = ;function oCount() {count++;console.log(count);}var funs= delayFun(oCount,);window.onresize = function () {funs()};function delayFun(func, wait) {var timer = null;return function () {var context = this,args = arguments;clearTimeout(timer);timer = setTimeout(function () {func.apply(context, args);}, wait)};}

To optimize the second method, the performance will be better.

A function is returned here. If it is continuously called, it will not be executed. This function can be executed only after it is called again N milliseconds after it is stopped. If the 'immediate' parameter is passed, the function will be immediately arranged in the execution queue without delay.

Function delayFun (func, wait, immediate) {var timeout; return function () {var context = this, args = arguments; var later = function () {timeout = null; if (! Immediate) func. apply (context, args) ;}; var callNow = immediate &&! Timeout; clearTimeout (timeout); timeout = setTimeout (later, wait); if (callNow) func. apply (context, args) ;};}; // usage var myEfficientFn = delayFun (function () {// all heavy operations},); window. addEventListener ('resize', myEfficientFn );

The callback function cannot be executed more than once within the specified time. This function is especially important when a callback function is assigned for an event that is frequently triggered.

If setTimeout is so powerful, can we use it in a large amount in projects?

I personally do not recommend that you use setTimeout in your business logic, because many of the methods I have seen are well solved, setTimeout is used as an hack.

For example, before an instance is initialized, we use this instance. The error solution is to add a setTimeout when using the instance to ensure that the instance is initialized first.

Why is the error? Here is the hack method.

The first is to bury the pitfalls and disrupt the life cycle of the module.

Second, it is difficult to debug setTimeout when a problem occurs.

I think the correct way to use it is to look at the life cycle (refer to the life cycle of the software) and refer to the examples before use.

For the clever use of setTimeout in JS, the front-end function Throttling is introduced here. I hope it will help you!