JS中setTimeout()用法總結

來源:互聯網
上載者:User

標籤:彈出對話方塊   名稱   interval   com   clear   size   javascrip   alert   style   

         在製作網頁動態效果時,一定會遇到某些需求,要求某段程式等待多時時間後再開始執行,就像在我們的生活中一樣,待會兒再開始做一件事。在JavaScript中主要通過定時器實現此類需求,本文將對定時器做一個概括,正對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秒後彈出的警示框,被自然叫停了。

 

JS中setTimeout()用法總結

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.