JavaScript基礎(16_定時器)
阿新 • • 發佈：2020-09-21
定時器
定時器
-
setInterval()
-
定時呼叫
-
可以將一個函式，每隔一段時間執行一次
-
引數：
-
回撥函式，該函式每隔一段時間會被呼叫一次
-
每次呼叫間隔的時間，單位是毫秒
-
-
返回值：
-
返回一個Number型別的資料
-
這個數字用來作為定時器的唯一標識
-
-
定時呼叫
-
需求：使得#count中的內容，自動切換
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <
程式碼實現meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function(){ // 獲取count var count = document.getElementById("count"); // 使得count中的內容，自動切換 varnum = 1; var timer = setInterval(function(){ count.innerHTML = num++; if(num == 100000){ clearInterval(timer); } },10); console.log(timer); // clearInterval()可以用來關閉一個定時器 // 方法中需要一個定時器的標識作為引數，這樣將關閉標識對應的定時器 // clearInterval(1);}; </script> </head> <body> <h1 id="count">1</h1> </body> </html>
延時器
-
延時呼叫
-
表示一個函式不馬上執行，隔一段時間後 再執行並且只會執行一次
-
延時呼叫和定時呼叫的區別是
-
定時會執行多次
-
延時只會執行一次
-
-
延時呼叫和定時呼叫實際上是可以互相代替的，在開發中，可以根據自己的需要去選擇
延時呼叫
-
需求：延時3秒後顯示數字1
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> var num = 1; // 延時呼叫 var timer = setTimeout(function(){ document.write(num++); },3000); // 關閉一個延時呼叫 // clearTimeout(timer); </script> </head> <body> </body> </html>
程式碼實現