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

This article mainly shows you "what is setTimeout () in JavaScript". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "what is setTimeout () in JavaScript".

What is setTimeout () in JavaScript?

SetTimeout () is a way to execute a piece of code after the timer has finished running.

This is the syntax of the setTimeout () method.

Let timeoutID = setTimeout (function, delay in milliseconds, argument1, argument2,...)

Let's break down the grammar.

Function

SetTimeout () will set a timer that will run once the timer runs out.

Delay in milliseconds

In this method, you can specify how many milliseconds you want the function to delay. 1000 milliseconds equals 1 second.

In this case, the message will appear on the screen after a 3-second delay. (3000 Ms)

Const para = document.getElementById ("para"); function myMessage () {paraj [XSS _ clean] = "I just appeared"; console.log ("message appeared");} setTimeout (myMessage, 3000)

If there is no delay in the setTimeout () method, set it to zero and the message will appear immediately.

Const para = document.getElementById ("para"); function myMessage () {paraj [XSS _ clean] = "No delay in this message"; console.log ("message appeared immediately");} setTimeout (myMessage); Parameter

You can also pass optional arguments to the function.

In this sample conversation, Britney will ask questions and Ashley's reply will be delayed by 3 seconds. It will include two optional parameters in the lunchMenu function.

Const ashley = document.getElementById ("ashley"); function lunchMenu (food1, food2) {Ashley [XSS _ clean] = `Ashley: I had ${food1} and ${food2}. `;} setTimeout (lunchMenu, 3000, "pizza", "salad"); timeout ID

SetTimeout () returns the positive integer and unique ID of the timeoutID timer.

Clear timeout ()

This method is used to cancel setTimeout (). Within the method, you must refer to timeoutID.

This is the basic grammar.

ClearTimeout (timeoutID)

In this example, the message will appear after a delay of 10 seconds (10000 milliseconds). But if the user clicks the Stop Timer button, setTimeout () will be canceled. Const timerMsg = document.getElementById ("message1")

Const stopBtn = document.getElementById ("stop"); function timerMessage () {timerMsg [XSS _ clean] = "Thanks for waiting!";} let timeoutID = setTimeout (timerMessage, 10000); stopBtn.addEventListener ("click", () = > {clearTimeout (timeoutID); timerMsg [XSS _ clean] = "Timer was stopped";}); you should pass a string to setTimeout () instead of a function

Passing strings instead of functions is considered a bad practice and a security risk.

Avoid writing setTimeout () like this:

SetTimeout ("console.log ('Do not do this');", 1000)

Some code editors warn you and recommend that you use functions instead.

In this case, always use a function instead of a string.

SetTimeout (function () {console.log ("Do this instead");}, 1000); how to setInterval () from different setTimeout ()?

Unlike setTimeout (), which executes the function only once after a delay, setInterval () repeats the function every set number of seconds. If you want to stop setInterval (), then you use clearInterval ().

Syntax for setInterval () and setTimeout ():

Let intervalID = setInterval (function, delay in milliseconds, argument1, argument2,...)

In this example, we have a sales message that is printed to the screen every second.

Let intervalID = setInterval () = > {salesMsg [XSS _ clean] + = "

Sale ends soon. BUY NOW!

";}, 1000)

Inside the setTimeout () method, we use clearInterval () for 10 seconds and then stop printing the message.

SetTimeout (() = > {clearInterval (intervalID);}, 10000)

Just like with setTimeout (), you must use the unique ID clearInterval () of the timer in the method.

Real-world project example

Now that we know how setTimeout () and setInterval () work, let's take a look at how it can be applied to actual functionality, examples on the site.

In this example, we have a progress bar that starts 2 seconds after the page loads. In setTimeout (), we setInterval () execute the animate () function as long as the bar width is not 100%.

SetTimeout (() = > {let intervalID = setInterval (() = > {if (barWidth = 100) {clearInterval (intervalID);} else {animate ();}}, 100); / / this sets the speed of the animation}, 2000)

Inside the animate () function, we have another setTimeout () that displays 100% when the progress bar is full.

Const animate = () = > {barWidth++; progressBar.style.width = `${barWidth}%`; setTimeout () = > {loadingMsg [XSS _ clean] = `$ {barWidth}% Completed`;}, 10100);}

The progress bar is just one of many animations you can use setTimeout () and create setInterval (). You can also use these methods when building online games.

Summary

SetTimeout () is a way to execute a piece of code after the timer has finished running.

The delay is set in milliseconds, and 1000 milliseconds equals 1 second.

If the delay is omitted in the setTimeout () method, the delay is set to 0 and the function executes.

You can also pass optional parameters to the function.

SetTimeout () returns the positive integer and unique ID of the timeoutID timer.

For security reasons, it is important not to use strings instead of functions.

If you want to cancel, setTimeout () needs to use clearTimeout ()

If you want to repeat a piece of code within the set number of seconds, you can use setInterval ().

SetTimeout () can be used to build basic JavaScript animations and online games.

The above is all the content of the article "what is setTimeout () in JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow 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.