javascript 設置超時

Michael Zippo

setTimeout() 和 setInterval() 是 JavaScript 同步事件。 JavaScript setTimeout() 方法在幾毫秒後執行一個函數。 JavaScript setInterval() 在經過一定的毫秒後執行一個連續的函數。

JavaScript 是逐行執行的。一旦執行了一行，就開始下一行。對於大多數站點來說，這種結構是有意義的——代碼應該按順序執行。如果我想在操作之間引入暫停怎麼辦？

這就是 setTimeout 和 setInterval 方法派上用場的地方。 setTimeout 在設置的超時後調用一個函數。 setInterval 調用具有指定延遲的 continue 函數。

在本指南中，我們將討論 setTimeout 和 setInterval< /em> 是。我們將通過參考一些示例來展示它們的工作原理，以便您可以開始使用這些方法。讓我們開始吧！

什麼是 JavaScript setTimeout？

JavaScript setTimeout() 在經過一定的毫秒後調用一個方法。該方法只被調用一次。 setTimeout() 方法可以讓你在你的代碼中引入延遲。

我們來看看這個方法的語法：

setTimeout接受的兩個參數是：
函數：。您希望在經過一段時間後運行的函數
小時：程序在執行函數之前應等待的時間。

啟動一個 JavaScript 定時器 setTimeout

讓我們創建一個打印“Python.Engineering!”的定時器通過箭頭函數 :

這個定時器有兩個參數。第一個參數是我們要在小部件中運行的 JavaScript 函數。第二個參數是我們希望在函數內部的代碼執行之前花費的時間長度（以毫秒為單位）。
等待兩秒後，我們的代碼會打印“Python.Engineering!”在 JavaScript 控制台。
您要調用的函數不得在 setTimeout 函數中定義。我們可以分解我們的代碼以使其更易於閱讀：

以前是參數的函數現在在它的函數中調用 printCareerKarma。我們在 setTimeout 方法中引用了這個函數。這段代碼比我們原來的例子更容易閱讀

如何取消一個 setTimeout 定時器

你可以在 clearTimeout() 方法中取消一個定時器。這將停止計時器的執行，並且計時器內的代碼將不會被執行。考慮以下代碼：

此代碼不會打印到控制台。這是因為我們在 SetTimer 計時器標籤有機會工作之前使用 clearTimeout 清除我們的計時器。
什麼是？是JavaScript setInterval
JavaScript setInterval() 方法重複調用一個函數。在每個
SETIN 函數調用之間定義了一個指定的延遲。 Terval() 使用類似於 setTimeout() 的語法：

必須指定兩個參數才能使用setInterval:
function:。將要執行的函數
時間：每次調用你指定的函數之間的時間

啟動一個JavaScript腳本定時器setInterval
雖然 setTimeout 只執行一次功能，但 setInterval 將繼續再次執行功能。它使用與 setTimeout 方法相同的語法。
讓我們創建一個函數來打印控制台上的茶几：

這段代碼重複執行iterateOverArray函數。每次調用此函數之間會有一秒（1000 毫秒）的延遲。

這段代碼的問題是，即使重複了我們列表中的每個項目，它仍然可以繼續工作。當我們列表中的所有項目都打印到控制台時，“未定義”setInterval 函數繼續工作
值，Äã，Äã 被無限打印。因為它會重複直到顯示停止。我們解決了這個問題。
如何取消一個setInterval定時器

clearInterval方法停止一個setInterval方法的執行加上.
在控制台上打印完所有菜單咖啡後取消我們的計時器。首先，讓我們計算一下咖啡單上有多少物品。這將使我們能夠確定何時應該取消計時器

接下來，我們將在我們的末尾添加一個函數代碼。這個函數在我們所有的咖啡都打印到控制台後停止我們的 setInterval 方法：

setInterval:。一個可視化示例

讓我們使用一些 HTML 來展示 setInterval 函數的工作原理。我們將創建一個簡單的網站來顯示我們的咖啡清單。這些咖啡將一一添加到網站上。我們將首先在名為 index.html 的文件中為項目創建一個簡單的前端：

我們的界面是這樣的：

目前

那裡沒有太多的做。因為我們必須編寫一些 javascript 才能讓我們的咖啡出現。

我們在網頁上。

將在選擇我們的列表時啟動我們的 javascript 打開腳本的調用文件條。js 粘貼此代碼: ..

此代碼從您可以了解更多列表中選擇我們的項目。 getElementById 在我們關於 JavaScript getElementById 的教程中。所以我們將從一開始就使用我們的代碼，稍加修改，在網頁上顯示咖啡館：

iterateOverArray 函數，我們添加了新代碼。我們首先使用 createElement () 來創建一個新的 li 元素。然後我們將這個 li 元素 的內容設置為與列表中一家咖啡館的名稱相同。

我們的代碼添加了 li 元素ul 到我們的列表中。重複這個過程，直到我們的咖啡列表中的所有內容都添加到網頁中，如上一個示例所示。

讓我們運行我們的代碼，看看會發生什麼。

<人物類=“WP-圖像塊”>

添加到網頁的每個元素之間有第二個間隔。

結論（和挑戰）

setTimeout 和 setInterval 是 JavaScript 同步事件。 setTimeout 方法在延遲後執行一個函數。 setInterval 重複調用一個函數，每次調用之間都有延遲。

想用這些方法提高你的技能嗎？嘗試使用 HTML 和 JavaScript 為記憶遊戲創建可視化界面。

遊戲應顯示一系列五個單詞以供用戶記憶。顯示單詞後，用戶應該詢問他記得哪些單詞。如果您正在尋找更多學習 JavaScript 的幫助，請閱讀我們的最佳 JavaScript 指南初學者教程.