Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you the relevant knowledge about how es6 clears the timer. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Two methods: 1, use clearTimeout () to clear setTimeout timer, syntax "clearTimeout (timer return value)"; 2, clearInterval () clear setInterval timer, syntax "clearInterval (return value)".

The operating environment of this tutorial: windows7 system, ECMAScript version 6, Dell G3 computer.

Two kinds of timers of JS

Window.setTimeout ([function], [interval])

Set a timer, and set a waiting time, when the arrival time, execute the corresponding method, when the method execution is completed, the timer stops.

Window.setInterval ([function], [interval])

Set a timer, and set a waiting time, when the arrival time, execute the corresponding method.

When the method execution is complete, the timer does not stop, and the corresponding method will be re-executed every so long until we clear the timer manually.

Note: setTimeout () only executes code once. If you want to call multiple times, use setInterval () or have code itself call setTimeout () again.

Timer return value

The timer in JS has a return value, and the return value is a number that represents the current timer.

Var timer1=window.setTimeout (function () {}, 1000); / / timer1- > 1 is currently the first timer var timer2=window.setTimeout (function () {}, 1000); / / timer2- > 2` is currently the second timer var timer3=window.setTimeout (function () {}, 1000); / / timer3- > 3 is currently the third timer

It is important to note that even if the timer is cleared, its return value will not be cleared, and the return value of the timer that is then set will continue to row back based on its return value.

How to clear the timer

If the timer is not cleaned in a timely manner, it may lead to the risk of memory overflow. So when we are using a timer, we need to consider clearing it at the right time.

The clear timer has two functions:

The destroy function of setTimeout is clearTimeout

The destroy function of setInterval is clearInterval

SetInterval objects or setTimeout objects, which are reclaimed from stack space only when the window object is destroyed. The garbage collector cannot be notified of automatic collection by changing the pointer of the variable to null. If you plan to destroy the setInterval object in the stack memory of the window object before it is closed, you can only destroy it through clearInterval.

ClearTimeout (id_of_settimeout)

Definition: blocks / cancels the timed execution function set by the setTimeout () method.

Parameter: id_of_settimeout is the ID value returned when the setTimeout () function is called. Using the return identifier as a parameter, you can cancel the scheduled operation set by the setTimeout ().

Note: to use the clearTimeout (id_of_setinterval) method, use global variables when creating and performing scheduled operations:

Var myVar = setTimeout (function () {alert ("Hello");}, 3000); clearTimeout (myVar)

Do you need to clean up setTimeOut in time?

Function testTimeout () {console.log ('1111') console.log (setTimeout (testTimeout, 3000));}

The above code is calling testTimeout recursively, but setTimeout will always generate setTimeout objects; although it will be reclaimed by GC, but the time is uncertain, it is dangerous to do so, which may lead to memory overflow.

So we should call clearTimeout before each setTimeout to prevent continuous creation of setTimeout objects without being reclaimed by GC.

Var timeHandle = null;function testTimeout () {if (timeHandle) {/ / before calling, clean up to prevent the object / / ps from being generated all the time. SetInterval timers should also handle clearTimeout (timeHandle) in this mode; timeHandle = null;} console.log ('1111'); console.log (timeHandle = setTimeout (testTimeout, 3000));}

ClearInterval (id_of_setinterval)

Definition: can cancel / stop the scheduled execution operation set by the setInterval () function.

Parameter: id_of_setinterval is the ID value returned when the setInterval () function is called. Only by using the return identifier as a parameter can the timing operation set by the setInterval () be canceled.

Note: to use the clearInterval () method, use global variables when creating and performing scheduled operations:

Var myVar = setInterval (function () {myTimer ()}, 1000); clearInterval (myVar)

Do you need to clean up setInterval in time?

Function testInterval () {console.log ('1111') console.log (setInterval (testInterval, 3000));}

The above code is calling testInterval recursively, but setInterval will always generate setInterval objects; although it will be reclaimed by GC, but the time is uncertain, it is dangerous to do so, which may lead to memory overflow.

So we should call clearInterval before each setInterval to prevent continuous creation of setInterval objects without being reclaimed by GC.

Var timeHandle = null;function testInterval () {if (timeHandle) {/ / before calling, clean to prevent the object clearInterval (timeHandle) from being generated all the time; timeHandle = null;} console.log ('1111'); console.log (timeHandle = setInterval (testInterval, 3000));}

Extended knowledge: using setTimeout to simulate setInterval behavior

In general: use setTimeOut () recursively, which is equivalent to using setInterval ()

Benefits:

Simplify the code

To ensure the accuracy of the order of function calls in asynchronous queues, the defects of setInterval will lead to confusion in the execution order of function calls in asynchronous queues when the amount of data is large. For example, before this function is finished, it starts to execute the next one, while recursion does not. Recursion is the next entity of the function that is recursively created and called in the stack space after the current function has been executed.

/ / the implementation method is quite simple, with the following code / / parameters: millisecond method function console1 () {console.log (111); if (timer) {clearTimeout (timer);} timer = setTimeout (function () {console1 ();}, 3000);} console1 () above is all the content of the article "how to clear the timer in es6". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.