setInterval與setTimeout的區別
一.setInterval與setTimeout的區別
setInterval
setInterval()方法可按照指定的周期來調用函數或者計算表達式(以毫秒為單位)
語法:
setInterval(函數表達式,毫秒數);
setInterval()會不停的調用函數,直到clearInterval()被調用或者窗口被關閉,由 setInterval()返回的ID值可用作clearInterval()方法的參數。
setTimeout
setTimeout()方法用於在指定毫秒數後再調用函數或者計算表達式(以毫秒為單位)
語法:
setTimeout(函數表達式,毫秒數);
setTimeout()只執行函數一次,如果需要多次調用可以使用setInterval(),或者在函數體內再次調用setTimeout()
區別
通過以上分析可以看出,setTimeout與setInterval的主要區別是:
setTimeout()方法只運行一次,也就是說當達到設定的時間後就出發運行指定的代碼,運行完後就結束了,如果還想再次執行同樣的函數,可以在函數體內再次調用setTimeout(),可以達到循環調用的效果。
setInterval()是循環執行的,即每達到指定的時間間隔就執行相應的函數或者表達式,是真正的定時器。
二.setTimeout()的用法
先寫個最簡單的demo,如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <script> 6 setTimeout("alert(‘hello‘)",2000); 7 </script> 8 </head> 9 <body> 10 </body> 11 </html>
頁面會在停留2秒之後彈出對話框,註意setTimeout不會自動重復執行!
當然,setTimeout也可以執行function,還可以不斷重復執行!
你可以看到h1中的文本數字在一秒一秒地遞增!
更加靈活的是,你還可以指定重復執行的次數,如下:
if判斷中的數字,是用來限制重復執行次數的條件。
三.clearTimeout()
要使用clearTimeout(),需要我們設定setTimeout()時, 給予這setTimeout()一個名稱, 這名稱就是timeoutID ,我們叫停時,就是用這 timeoutID 來叫停
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <script> 6 var timeId= setTimeout("alert(‘hello‘)",2000); 7 clearTimeout(timeId); 8 </script> 9 </head> 10 <body> 11 </body> 12 </html>
原計劃1秒後彈出的警示框,被自然叫停了。
本人正在學習和摸索中,如有錯誤,歡迎指正!
setInterval與setTimeout的區別