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

This article introduces the relevant knowledge of "what is the principle of JavaScript timer". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. SetTimeout () timer

Syntax:

Window.setTimeout (calling function, [milliseconds of delay])

The setTimeout () method is used to set a timer that executes the calling function after the timer expires.

For example: write a page and let it pop up "Hello" in five seconds.

The code is as follows:

Window.setTimeout (function () {alert ('Hello');}, 5000)

The running result is:

It is important to note that:

Window can be omitted.

This calling function can write the function directly, or write the function name or take the form of the string 'function name ()'.

The default number of milliseconds for delay is 0. If you write, it must be milliseconds. The calling function setTimeout () is also called the callback function callback. Ordinary functions are called directly in code order. This function needs to wait time, and the time is up to call this function, so it is called a callback function.

Stop the setTimeout () timer

When we create a timer, what should we do if we want to cancel it? The function to clear the timer is used, as follows:

Window.clearTimeout (timeoutID)

The clearTimeout () method cancels the timer that was previously established by calling setTimeout ().

Here window can be omitted, and the parameters in it are the identifier of the timer.

For example:

For the above case list, if we want to stop it before specifying an event, we can first add a click button to add an event to clear the timer to this button, as follows:

Var hello = window.setTimeout (function () {alert (Hello);}, 5000); var btn = document.querySelector ('button'); btn.addEventListener (' click',function () {window.clearTimeout (hello);})

The running effect is as follows:

As you can see, when we do not click the stop button, five seconds later pop up "Hello", refresh the page, when we click the button, no matter how long, there will be no pop-up window, clear the timer successfully.

III. SetInterval () timer

Let's take a look at another kind of timer.

Window.setInterval (callback function, [milliseconds between])

The setInterval () method calls a function repeatedly, and every other time, the callback function is called.

Window can be omitted.

This calling function can write the function directly, or write the function name or take the form of the string 'function name ()'.

The omission of milliseconds between intervals defaults to 0. If written, it must be milliseconds, indicating how many milliseconds this function is called automatically.

We often assign an identifier to the timer.

The first execution is also performed after an interval of milliseconds, and then every millisecond.

For example:

Let's write a timer to print a "Hello" every other second. The code is:

SetInterval (function () {console.log ('Hello')}, 1000)

The running effect is as follows:

Clear the setInterval () timer

Similarly, we can clear the effect of the setInterval () timer with the syntax:

Window.clearInterval (intervalID)

The clearInterval () method cancels the timer that was previously established by calling setInterval ().

Note:

Window can be omitted.

The parameter inside is the identifier of the timer.

For example, we now have two buttons. Click one to start the timer, and click the other to clear the timer. The operation method is:

Start to stop var btn = document.querySelectorAll ('button'); var timer = null; btn [0] .addEventListener (' click',function () {timer = setInterval (function () {console.log ('Hello')) }, 1000)}) btn [1] .addEventListener ('click',function () {clearInterval (timer)})

The running effect is as follows:

V. case of electronic clock

We can now make an electronic clock that displays the current year, month, day, hour, minute and second, and allows them to change automatically, the code is as follows:

Document div {width: 500px; margin: 100px auto; font-size: 25px;} var div = document.querySelector ('div'); function showTime () {var date = new Date (); var y = date.getFullYear (); var m = date.getMonth () + 1 M = m > = 10mm; var d = date.getDate (); d = d > = 10mm; var h = date.getHours (); h = h > = 10mm; var dm = date.getMinutes (); dm = dm > = 10mm; var ds = date.getSeconds () Ds = ds > = 10 days; var str = year 'year' + month 'month' + day 'day + hour' + dm + 'minute' + ds+' second'; div [XSS _ clean] = str; setTimeout (showTime,1000);} _ window.onload = showTime ()

The running effect is as follows:

This is the end of the content of "what is the principle of JavaScript timer". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.