Shulou(Shulou.com)06/02 Report--

This article is about how JavaScript implements timers. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

A brief introduction

There are two timers in JavaScript, setInterval () and setTimeout (), and there are methods to cancel the timer.

These are all objects of window, and you can omit window when calling. These two methods are not in the JavaScript specification.

There are four methods related to timer.

Method describes how setInterval periodically calls a function (function) or executes a piece of code. ClearInterval cancels the repeated execution action set with setInterval. SetTimeout calls a function or executes a code snippet after the specified delay time. The clearTimeout method cancels the timeout set by the setTimeout () method.

The difference between setTimeout () and setInterval () is that they are executed differently.

Note: setTimeout () executes setInterval () only once and periodically at a given interval.

SetInterval description

The setInterval () method can repeatedly call a function or execute a code snippet according to a specified cycle. The period is in milliseconds.

The setInterval () method is called all the time if it is not closed by the clearInterval () method or if the page is closed.

SetInterval has more than one parameter.

First, if the first parameter is a code segment, then the setInterval () method can be optionally filled.

Second, the setInterval () method can have multiple arguments if the first argument is a function.

Let timerId = setInterval (func | code, delay, arg1, arg2,...) Parameter description func is required / optional | the function or code string to be executed after the called function code is required. The time required before code execution is required (in milliseconds). The default value is 0arg1argarg2. Select the parameter list to pass in the function (or code string) to be executed (not supported below IE9)

Parameter func | code is usually passed as a function. For some historical reason, incoming code strings are supported, but this is not recommended.

Return value

The return value timeoutID is a positive integer indicating the number of the timer. This value can be passed to clearTimeout () to cancel the timer.

Usage

This is an example of clicking a button and adding one to the number every other second.

After clicking, wait for a second number to add one const showNum = document.getElementById ("showNum"); let timerId; let num = 0; addNum (); function timer () {timerId = setTimeout (addNum, 1000);} function addNum () {showNum.innerText = `${num++}`;} cancel timer

The clearInterval () method cancels the timer set by setInterval ().

The clearTimeout () method cancels the timer set by setTimeout ().

The method is simple, with only one parameter, timeoutID, which is the identifier of the timer you want to cancel.

The ID is returned by the corresponding setTimeout () or clearTimeout () call.

ClearInterval (intervalID); clearTimeout (timeoutID)

Note that setTimeout () and setInterval () share a numbering pool, and technically, clearTimeout () and clearInterval () are interchangeable. However, to avoid confusion, do not mix untimed functions.

The usage is very simple.

Function timer () {timerId = setTimeout (addNum, 1000);} clearTimeout (timerId); / / when the code runs to this line, the timer set by timer is canceled. Use timers in the console

Timers can also be used in the browser console

Console.time (timerName)

Create a timer called name and start timing.

Each timer must have a unique name, and a maximum of 10000 timers can be run at the same time on the page.

Console.timeEnd (timerName)

Call console.timeEnd (name) to stop the timer and output the elapsed time in milliseconds.

Console.time (timerName); console.timeEnd (timerName); usage

Example of how long it takes for 99999 for loops.

Console.time (name); let num;for (let index = 0; index < 99999; index++) {num++;} console.timeEnd (name); Thank you for reading! This is the end of the article on "how to implement timer in JavaScript". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.