引用: setTimeout和setInterval兩者的區別 setTimeout和setInterval的優缺點 setTimeout和setInterval詳解 兩者的作用都是在定時多少毫秒後回調(函數),不同在於 1. 執行次數,setTimeout在一個固定時間後回調一次函數。而setTi ...
引用:
兩者的作用都是在定時多少毫秒後回調(函數),不同在於
1. 執行次數,setTimeout在一個固定時間後回調一次函數。而setTimeout可以迴圈回調
e.g. 1) 定義變數初始值為0,當定時器Timer使用setTimeout回調時,此時變數結果為2(在頁面調用一次函數後setTimeout回調一次函數)。
1 <body onload="myFunction()"> 2 <p id="demo"></p> 3 <script> 4 var i = 0; 5 function myFunction() 6 { 7 i++; 8 document.getElementById("demo").innerHTML = i; 9 10 } 11 var timer = setTimeout(function(){myFunction()},500); 12 13 </script> 14 </body>
e.g. 2) 同樣定義變數初始值為0,當定時器Timer使用setInterval回調時,此時變數呈現每0.5秒加1的計時效果。
1 <body onload="myFunction()"> 2 <p id="demo"></p> 3 <script> 4 var i = 0; 5 function myFunction() 6 { 7 i++; 8 document.getElementById("demo").innerHTML = i; 9 10 } 11 var timer = setInterval(function(){myFunction()},500); 12 13 </script> 14 </body>
e.g. 3) 如果把setTimeout計時器寫入到函數中,這時也能達到上述第二例的效果(此方法會導致函數運行的記憶體負擔增加,不推薦)
<body onload="myFunction()"> <p id="demo"></p> <script> var i = 0; function myFunction() { i++; document.getElementById("demo").innerHTML = i; var timer = setTimeout(function(){myFunction()},500); } </script> </body>
今天就先寫到這兒吧