setTimeout和setInterval

區別:
setTimeout 可以使一段代碼在指定時間后運行;而 setInterval 則可以使一段代碼每過指定時間就運行一次。

setInterval 為自動重復,setTimeout 不會重復。

clearTimeout(對象) 清除已設置的setTimeout對象,clearInterval(對象) 清除已設置的。它們接收一個id,表示一個定時器。

setTimeout(code,millisec)

code (必需):要調用的函數后要執行的 JavaScript 代碼串。
millisec(必需):在執行代碼前需等待的毫秒數。

setTimeout() 只執行 code 一次。如果要多次調用,請使用 setInterval() 或者讓 code 自身再次調用 setTimeout()。

實例一:
點擊按鈕,5秒后顯示消息框。

<html>
<head>
  <script type="text/javascript">
    function timedMsg() {
      var t=setTimeout("alert('5 seconds!')",5000)
    }
  </script>
</head>

<body>
  <form>
    <input type="button" value="顯示計時的消息框!" onClick = "timedMsg()">
  </form>
  <p>點擊上面的按鈕。5 秒后會顯示一個消息框。</p>
</body>

</html>

實例二:
點擊“開始計時”按鈕,輸入框會從 0 開始一直進行計時。點擊“停止計時”可停止計時。

<html>
  <head>
    <script type="text/javascript">
      var c=0
      var t
      function timedCount() {
        document.getElementById('txt').value=c
        c=c+1
        t=setTimeout("timedCount()",1000)
       }

      function stopCount() {
       clearTimeout(t)
      }
    </script>
  </head>

  <body>
    <form>
      <input type="button" value="開始計時!" onClick="timedCount()">
      <input type="text" id="txt">
      <input type="button" value="停止計時!" onClick="stopCount()">
    </form>

    <p>請點擊上面的“開始計時”按鈕。輸入框會從 0 開始一直進行計時。點擊“停止計時”可停止計時。</p>
  </body>
</html>

setInterval(code,millisec[,"lang"])

code (必需):要調用的函數后要執行的 JavaScript 代碼串。
millisec(必需):在執行代碼前需等待的毫秒數。

實例:使用 setInterval() 和 clearInterval()

一個有趣的現象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
    <script>
        alert(1); 
        setTimeout("alert(2)", 0); 
        alert(3); 
    </script>
</body>
</html>

執行結果為 1- 3 - 2,這說明了 settimeout(0) 并不是立即執行。

因為 js引擎是單線程執行的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
</body>
<script>
    var isEnd = true;
    window.setTimeout(function () {
        isEnd = false;//1s后,改變isEnd的值
    }, 1000);
    while (isEnd);
    alert('end');
</script>
</html>

isEnd默認是true的,在while中是死循環的.最后的alert是不會執行的。

關于單線程,可讀:關于JavaScript單線程的一些事

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容