I learned js a few days ago and saw two very interesting functions, namely the setTimeout function and the setInterval function. These two functions can make web pages present very common effects on web pages, such as picture carousels, and some very fun effects. Let’s learn about these two functions below!
The syntax and application of a setTimeout function and setInterval function
1.setTimeout function
Definition and usage: The setTimeout() method is used to call a function or calculate an expression after the specified number of milliseconds.
Syntax: setTimeout(code,millisec);
parameter:
code (required): The JavaScript code string to be executed after the function to be called.
millisec (required): The number of milliseconds to wait before executing the code.
hint:
setTimeout() executes code only once. If you want to call multiple times, use setInterval() or have the code itself call setTimeout() again.
Return value
A value that can be passed to Window.clearTimeout() to cancel periodic execution of code.
Since setTimeout is a timer function, there are functions to clean up the timer, so we use the clearTimeout function.
clearTimeout(ID value returned by setTimeout());
2.setInterval definition
The setInterval() method calls a function or calculates an expression according to the specified period (in milliseconds).
The setInterval() method will call the function continuously until clearInterval() is called or the window is closed. The ID value returned by setInterval() can be used as a parameter to the clearInterval() method.
grammar
setInterval(code,millisec[,"lang"]);
Parameter code is required. The function to be called or the string of code to be executed.
millisec must. The interval between periodic execution or calling code, in milliseconds
Return value
A value that can be passed to Window.clearInterval() to cancel periodic execution of the code.
Since setTimeout is a timer function, there are functions to clean up the timer, so we use the clearInterval() function.
clearInterval() (ID value returned by setInterval());
2. Case:
Countdown effect
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Countdown effect</title> <script type="text/ecmascript"> // Use js method to achieve the countdown effect var t1; window.onload = function () { //01 Position to the start button and return a dom object var btns = document.getElementById('btnStart'); //02. Register the click event for the start button btns.onclick = function () { //Execute the function that the first parameter of the setInterval function is to be executed regularly, and the second parameter is the function that executes every milliseconds t1= setInterval(start, 1000); } //03 Position to the stop button to return a dom object var btnst = document.getElementById('btnStop'); btnst.onclick = function () { clearInterval(t1); } } // Function to be executed 1 second function start() { //01. Get the text in the div to assign to a variable var divdom = document.getElementById('msg'); var divnum = divdom.innerText; //Judge whether the value of divnum is 0 if (divnum > 0) { divnum--; //Reassign the subtracted value to divnum divdom.innerText = divnum; } } </script></head><body> <input type="button" id="btnStart" value="Start" /> <input type="button" id="btnStop" value="stop" /><br /> <div id="msg">10</div></body></html>Background image switching:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> var count = 1;//Define the initial variable to the first image by default window.onload = function () { //Define the show function every second using the timer function to execute setInterval(show,1000); } //The function to be executed function show() { //If the image reaches the last (5 pictures), change the next displayed image to the first one. If the last picture is not reached, the next image will be displayed if (count > 5) { count = 1; } else { count++; } //Get the dom object with id myimg var dom = document.getElementById("myimg"); //Change the src attribute pointing of the img tag, and change the image dom.src = "image/"+count+".jpg" } </script></head><body> <img src="image/1.jpg" id="myimg" /></body></html>Name caller
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> //Define an array to save the basic data in the namer var data = ['Zhang San', 'Li Si', 'Wang Er', 'Xiao Chen', 'Xiao Zhang']; var i = 0;//Declare an initial variable to let the first person display on the page by default var t1; window.onload = function () { //02. Get the dom object of the start-name button to register the click event for the object var dom = document.getElementById("mybtn"); dom.onclick = function () { //Use the setInterval function to call the result function t1 = setInterval(start, 500); //This method only calls setTimeout(stop, 6000); } //Define an anonymous function to assign it to a variable result var start= function() { //03Get the h1 tag object and assign a value to the text of the h1 tag var domh = document.getElementById("myh1"); domh.innerText = data[i % data.length];//Replace existing, element value i++; } //Call the anonymous function start(); var stop = function () { //Clear the timer clearInterval(t1); //Students who click on the prompt box pops up and answer alert("Please" + document.getElementById("myh1").innerText+"Students answer"); } } }</script></head><body> <h1 id="myh1"></h1><button id="mybtn"> Start calling</button></body></html>Through the above cases, I believe everyone should be familiar with these two functions.
The above article has a deep understanding of the setTimeout function and the setInterval function. This article is all the content I have shared with you. I hope it can give you a reference and I hope you can support Wulin.com more.