Timer of BOM series

---

window The object provides us with 2 It's a very easy way to use - Timer .

• setTimeout()
• setInterval()

1、setTimeout() Bomb timer

WindowOrWorkerGlobalScope Mixed setTimeout() Method to set a timer , The timer executes a function or a specified piece of code after the timer expires .

1.1、 Turn on timer

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

1.1.1、 Parameters

• function

function It's when you want to expire (delay millisecond ) The function executed after .

• code

This is an optional Syntax , You can use strings instead of function , stay delay Compile and execute strings in milliseconds ( Using this syntax is not recommended , Reason and use eval() equally , There are security risks ).

• delay

Optional
The number of milliseconds delayed ( One second is equal to 1000 millisecond ), The call to the function will occur after this delay . If this parameter is omitted ,delay Take the default value 0, signify “ immediately ” perform , Or as soon as possible . In either case , The actual delay time may be longer than expected (delay Number of milliseconds ) Shift supervisor , Please check the reason why the actual delay is longer than the set value ： Minimum delay time .

• arg1, …, argN

Optional
Additional parameters , Once the timer expires , They are passed as parameters to function

1.1.2、 Return value

Return value timeoutID Is a positive integer , Indicates the number of the timer . This value can be passed to clearTimeout() To cancel the timer .

1.1.3、 Example

<script> //  The callback function is an anonymous function  setTimeout(function () {
       console.log(" time out "); }, 2000); function callback() {
       console.log(" exploded "); } //  The callback function is a well-known function  var timer1 = setTimeout(callback, 3000); var timer2 = setTimeout(callback, 5000); </script>

1.2、 Stop timer clearTimeout()

WindowOrWorkerGlobalScope Built in clearTimeout() Method cancels the previous call setTimeout() Set up a timer .

1.2.1、 grammar

scope.clearTimeout(timeoutID)

1.2.2、 Parameters

• timeoutID

The identifier of the timer you want to cancel . The ID By the corresponding setTimeout() Call return .

1.2.3、 describe

Pass in a wrong ID to clearTimeout() There will be no impact ; It doesn't throw an exception .

1.2.4、 Example

<button> Click stop timer </button>
<script> var btn = document.querySelector("button"); //  Turn on timer  var timer = setTimeout(function () {
       console.log(" exploded "); }, 5000); //  Register the click event for the button  btn.addEventListener("click", function () {
       //  Stop timer  clearTimeout(timer); }); </script>

2、setInterval() Alarm timer

Window and Worker Interface provided setInterval() Method repeatedly calls a function or executes a code fragment , There is a fixed time interval between each call .

It returns a interval ID, The ID Uniquely identify the time interval , So you can call later clearInterval() To remove the timer .

2.1、 Turn on timer

var intervalID = setInterval(func, [delay, arg1, arg2, ...]);
var intervalID = setInterval(function[, delay]);
var intervalID = setInterval(code, [delay]);

2.1.1、 Parameters

• func

The function to be called repeatedly , Every time you specify delay Once in milliseconds . The first call occurred in delay In milliseconds .

• code

This syntax is optional , You can pass a string instead of a function object , The string you pass will be compiled and then passed every time delay Execute in milliseconds . This grammar is related to eval() There are the same safety risks, so it is not recommended to use .

• delay

Is the number of milliseconds per delay （ One second is equal to 1000 millisecond ）, Each call to a function occurs after this delay . If not specified , The default value is 0. See the delay limit below for details delay Value range of .

• arg1, …, argN

Optional
When the timer expires , Will be passed on to func Additional parameters of the function .

2.1.2、 Return value

Return value intervalID Is a non-zero value , Used to mark passage setInterval() Timer created , This value can be used as clearInterval() To clear the corresponding timer .

2.1.3、 Example

<script> // 1. setInterval setInterval(function () {
       console.log(" Continue to output "); }, 1000); </script>

2.2、 Stop timer clearInterval()

WindowOrWorkerGlobalScope mixin Of clearInterval() Method can cancel the previous pass setInterval() Set repeated scheduled tasks .

2.2.1、 grammar

scope.clearInterval(intervalID)

2.2.2、 Parameters

intervalID
Of the timer to cancel ID. By setInterval() Back to .

2.2.3、 Return value

undefined

---

Postscript

If you feel the article is not good //(ㄒoㄒ)//, Just leave a message in the comments , The author continues to improve ;o_O???
If you think the article is a little useful , You can praise the author ;\\*^o^*//
If you want to progress with the author , Sure Wechat scan QR code , Focus on the front-end old L;~~~///(^v^)\\\~~~
Thank you readers (^_^)∠※！！！