国产97人人超碰caoprom,成人网站免费观看

首頁

web前端

js教程

Settimeout JavaScript函數(shù)：指南示例

Jack chen

Feb 10, 2025 pm 02:34 PM

setTimeout JavaScript Function: Guide with Examples

JavaScript 的 setTimeout 函數(shù)詳解：實(shí)現(xiàn)延遲執(zhí)行

setTimeout 是 JavaScript 中的原生函數(shù)，用于在指定延遲（毫秒）后調(diào)用函數(shù)或執(zhí)行代碼片段。這在許多場景下非常有用，例如：在用戶瀏覽頁面一段時間后顯示彈出窗口，或在移除元素懸停效果前添加短暫延遲（防止誤操作）。

關(guān)鍵要點(diǎn)：

JavaScript 的 setTimeout 函數(shù)允許在指定毫秒數(shù)的延遲后執(zhí)行函數(shù)或代碼片段，這對于諸如在一定瀏覽時間后顯示彈出窗口之類的任務(wù)非常有用。
setTimeout 接受函數(shù)引用作為第一個參數(shù)，該引用可以是函數(shù)名稱、引用函數(shù)的變量或匿名函數(shù)。它也可以執(zhí)行代碼字符串，但不建議這樣做，因?yàn)檫@樣會降低可讀性、安全性并降低速度。
可以使用匿名函數(shù)作為第一個參數(shù)，將參數(shù)傳遞給 setTimeout 執(zhí)行的回調(diào)函數(shù)。但是，在延遲之后列出參數(shù)的替代方法與 IE9 及以下版本不兼容。
在 setTimeout 執(zhí)行的代碼中，this 的值在與調(diào)用它的函數(shù)不同的執(zhí)行上下文中運(yùn)行，這在 this 關(guān)鍵字的上下文很重要時可能會導(dǎo)致問題。這可以使用 bind、庫函數(shù)或箭頭函數(shù)來解決。
setTimeout 的返回值是一個數(shù)字 ID，可用于結(jié)合 clearTimeout 函數(shù)取消計時器。

setTimeout 使用示例

以下代碼塊顯示了一個簡單的示例，該示例將在 2 秒（2000 毫秒）的超時后將消息打印到控制臺：

function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);

為了更詳細(xì)地演示這個概念，下面的演示在點(diǎn)擊按鈕兩秒鐘后顯示一個彈出窗口：（請?jiān)L問 CodePen 查看演示）

語法

根據(jù) MDN 文檔，setTimeout 的語法如下：

const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])

其中：

timeoutID 是一個數(shù)字 ID，可與 clearTimeout 結(jié)合使用以取消計時器。
scope 指的是 Window 接口或 WorkerGlobalScope 接口。
functionRef 是計時器到期后要執(zhí)行的函數(shù)。
code 是一種替代語法，允許您包含字符串而不是函數(shù)，該字符串在計時器到期時進(jìn)行編譯和執(zhí)行。
delay 是函數(shù)調(diào)用應(yīng)延遲的毫秒數(shù)。如果省略，則默認(rèn)為 0。
arg1, ..., argN 是傳遞給 functionRef 指定的函數(shù)的其他參數(shù)。

注意：方括號 [] 表示可選參數(shù)。

setTimeout 與 window.setTimeout

您會注意到，有時語法中包含 window.setTimeout。這是為什么呢？

在瀏覽器中運(yùn)行代碼時，scope 將指代全局 window 對象。setTimeout 和 window.setTimeout 指的是同一個函數(shù)，唯一的區(qū)別是，在第二個語句中，我們將 setTimeout 方法作為 window 對象的屬性來引用。

在我看來，這增加了復(fù)雜性，而好處卻微乎其微。如果您定義了另一種 setTimeout 方法，該方法將在作用域鏈中優(yōu)先找到并返回，那么您可能還有更大的問題需要擔(dān)心。

在本教程中，我將省略 window，但最終，您選擇哪種語法取決于您自己。

setTimeout 方法的使用示例

setTimeout 方法接受函數(shù)引用作為第一個參數(shù)。

這可以是函數(shù)的名稱：

function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);

引用函數(shù)的變量（函數(shù)表達(dá)式）：

const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])

或者匿名函數(shù)：

function greet() {
  alert('Howdy!');
}
setTimeout(greet, 2000);

如上所述，也可以將代碼字符串傳遞給 setTimeout 以供其執(zhí)行：

const greet = function() {
  alert('Howdy!');
};
setTimeout(greet, 2000);

但是，由于以下原因，不建議這樣做：

難以閱讀（因此難以維護(hù)和/或調(diào)試）。
它使用隱式 eval，這是一種潛在的安全風(fēng)險。
它比替代方案慢，因?yàn)樗仨氄{(diào)用 JS 解釋器。

傳遞參數(shù)給 setTimeout

在基本場景中，首選的跨瀏覽器方法是使用匿名函數(shù)作為第一個參數(shù)將參數(shù)傳遞給 setTimeout 執(zhí)行的回調(diào)函數(shù)。

在下面的示例中，我們從 animals 數(shù)組中選擇一個隨機(jī)動物，并將此隨機(jī)動物作為參數(shù)傳遞給 makeTalk 函數(shù)。然后，setTimeout 以一秒的延遲執(zhí)行 makeTalk 函數(shù)：

setTimeout(() => { alert('Howdy!'); }, 2000);

注意：我使用了一個常規(guī)函數(shù)（getRandom）從數(shù)組中返回一個隨機(jī)元素。也可以使用箭頭函數(shù)將其編寫為函數(shù)表達(dá)式：

setTimeout('alert("Howdy!");', 2000);

我們將在下一節(jié)介紹箭頭函數(shù)。這里有一個包含上述代碼的 CodePen（您需要打開控制臺才能查看輸出）。

替代方法

從文章頂部的語法可以看出，傳遞參數(shù)給 setTimeout 執(zhí)行的回調(diào)函數(shù)還有第二種方法。這涉及在延遲之后列出任何參數(shù)。

參考我們之前的示例，這將給我們：

function makeTalk(animal) {
  const noises = {
    cat: 'purr',
    dog: 'woof',
    cow: 'moo',
    pig: 'oink',
  }

  console.log(`A ${animal} goes ${noises[animal]}.`);
}

function getRandom(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

const animals = ['cat', 'dog', 'cow', 'pig'];
const randomAnimal = getRandom(animals);

setTimeout(() => {
  makeTalk(randomAnimal);
}, 1000);

不幸的是，這在 IE9 或以下版本中不起作用，其中參數(shù)作為 undefined 傳遞。如果您不幸需要支持 IE9，則 MDN 上提供了一個 polyfill。

this 關(guān)鍵字的問題

setTimeout 執(zhí)行的代碼在其與調(diào)用它的函數(shù)不同的執(zhí)行上下文中運(yùn)行。當(dāng) this 關(guān)鍵字的上下文很重要時，這會成為問題：

function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);

此輸出的原因是，在第一個示例中，this 指向 dog 對象，而在第二個示例中，this 指向全局 window 對象（它沒有 sound 屬性）。

為了解決這個問題，有各種方法……

顯式設(shè)置 this 的值

您可以使用 bind 來實(shí)現(xiàn)，bind 方法創(chuàng)建一個新函數(shù)，當(dāng)調(diào)用該函數(shù)時，其 this 關(guān)鍵字將設(shè)置為提供的值（在本例中為 dog 對象）。這將給我們：

const timeoutID = setTimeout(code);
const timeoutID = setTimeout(code, delay);

const timeoutID = setTimeout(functionRef);
const timeoutID = setTimeout(functionRef, delay);
const timeoutID = setTimeout(functionRef, delay[, arg1, arg2, /* … ,*/ argN])

使用庫

許多庫都帶有內(nèi)置函數(shù)來解決此問題。例如，jQuery 的 jQuery.proxy() 方法。它接受一個函數(shù)并返回一個新函數(shù)，該函數(shù)將始終具有特定上下文。在本例中，那將是：

function greet() {
  alert('Howdy!');
}
setTimeout(greet, 2000);

在 setTimeout 中使用箭頭函數(shù)

箭頭函數(shù)是在 ES6 中引入的。它們比常規(guī)函數(shù)的語法短得多：

const greet = function() {
  alert('Howdy!');
};
setTimeout(greet, 2000);

當(dāng)然，您可以將它們與 setTimeout 一起使用，但是需要注意一點(diǎn)——箭頭函數(shù)沒有自己的 this 值。相反，它們使用封閉詞法上下文的 this 值。

使用常規(guī)函數(shù)：

setTimeout(() => { alert('Howdy!'); }, 2000);

使用箭頭函數(shù)：

setTimeout('alert("Howdy!");', 2000);

在第二個示例中，this 指向全局 window 對象（同樣，它沒有 sound 屬性）。

這在將箭頭函數(shù)與 setTimeout 一起使用時可能會讓我們陷入困境。之前我們看到了如何為 setTimeout 中調(diào)用的函數(shù)提供正確的 this 值：

function makeTalk(animal) {
  const noises = {
    cat: 'purr',
    dog: 'woof',
    cow: 'moo',
    pig: 'oink',
  }

  console.log(`A ${animal} goes ${noises[animal]}.`);
}

function getRandom(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

const animals = ['cat', 'dog', 'cow', 'pig'];
const randomAnimal = getRandom(animals);

setTimeout(() => {
  makeTalk(randomAnimal);
}, 1000);

當(dāng)在引入的方法中使用箭頭函數(shù)時，這將不起作用，因?yàn)榧^函數(shù)沒有它自己的 this 值。該方法仍將記錄 undefined。

使用箭頭函數(shù)和 setTimeout 編寫更簡潔的代碼

但是，因?yàn)榧^函數(shù)沒有自己的 this 值，所以它也可以為我們帶來優(yōu)勢。

考慮這樣的代碼：

const getRandom = arr => arr[Math.floor(Math.random() * arr.length)];

可以使用箭頭函數(shù)更簡潔地重寫它：

setTimeout(makeTalk, 1000, randomAnimal);

如果您想了解箭頭函數(shù)的入門知識，請閱讀“ES6 箭頭函數(shù)：JavaScript 中簡潔的語法”。

取消計時器

正如我們在文章開頭了解到的那樣，setTimeout 的返回值是一個數(shù)字 ID，可與 clearTimeout 函數(shù)結(jié)合使用以取消計時器：

function greet() {
  console.log('Howdy!');
}
setTimeout(greet, 2000);

讓我們看看它的實(shí)際效果。在下面的 Pen 中，如果您點(diǎn)擊“開始倒計時”按鈕，倒計時將開始。如果倒計時完成，小貓就贏了。但是，如果您按下“停止倒計時”按鈕，計時器將被停止并重置。（如果您在倒計時達(dá)到零時沒有看到很酷的效果，請使用嵌入底部右側(cè)的按鈕重新運(yùn)行 Pen。）

總結(jié)

在本文中，我演示了如何使用 setTimeout 來延遲函數(shù)的執(zhí)行。我還展示了如何將參數(shù)傳遞給 setTimeout，如何在其回調(diào)函數(shù)內(nèi)部維護(hù) this 值，以及如何取消計時器。

setTimeout JavaScript 函數(shù)的常見問題解答

setTimeout 在 JavaScript 中是什么？

setTimeout 是 JavaScript 中的內(nèi)置函數(shù)，允許您在指定的延遲（以毫秒為單位）后安排函數(shù)或代碼段的執(zhí)行。
setTimeout 如何工作？

當(dāng)您調(diào)用 setTimeout 函數(shù)時，您需要提供兩個參數(shù)：要執(zhí)行的函數(shù)或代碼，以及以毫秒為單位的延遲。提供的函數(shù)/代碼將添加到隊(duì)列中，并在指定的延遲后，它將從隊(duì)列移動到調(diào)用堆棧以執(zhí)行。
使用 setTimeout 的替代方法有哪些？

是的，有替代方法，例如 setInterval，它會以指定的間隔重復(fù)執(zhí)行函數(shù)，以及較新的 requestAnimationFrame，它用于更流暢的動畫和更好的瀏覽器性能。
什么時候不應(yīng)該使用 setTimeout？

setTimeout 是用于在 JavaScript 中調(diào)度異步代碼執(zhí)行的有用工具，但在某些情況下它可能不是最佳選擇。對于精確的動畫或游戲，您應(yīng)該使用 requestAnimationFrame。您不應(yīng)該嵌套多個 setTimeout 調(diào)用；最好使用 Promise 或異步模式。setTimeout 對小于 10 毫秒的延遲不準(zhǔn)確；請考慮替代方案。如果您正在構(gòu)建實(shí)時應(yīng)用程序（如在線多人游戲或金融交易平臺），請選擇實(shí)時技術(shù)，如 WebSockets。大型 CPU 密集型任務(wù)可能會阻塞事件循環(huán)；如果需要，請使用 Web Workers。
我可以取消 setTimeout 操作嗎？

是的，您可以使用 clearTimeout 函數(shù)取消計劃的超時。它將 setTimeout 返回的超時 ID 作為參數(shù)。例如：const timeoutId = setTimeout(myFunction, 1000); clearTimeout(timeoutId);
setTimeout 和 setInterval 之間的區(qū)別是什么？

setTimeout 將函數(shù)安排在指定的延遲后運(yùn)行一次，而 setInterval 將函數(shù)安排在指定的間隔重復(fù)運(yùn)行，直到它被取消或程序停止。
我可以使用 setTimeout 的最小延遲值是多少？

最小延遲值為 0，這意味著該函數(shù)安排在當(dāng)前線程完成但處理任何掛起的事件之前執(zhí)行。但是，計時器的實(shí)際粒度因不同的瀏覽器和環(huán)境而異。某些環(huán)境可能不支持小于 10 毫秒的延遲。
setTimeout 在 Node.js 中是什么？

setTimeout 是 Node.js 的內(nèi)置函數(shù)，用于將給定函數(shù)或代碼塊的執(zhí)行延遲指定的毫秒數(shù)。
如何在 Node.js 中使用 setTimeout？

您可以按如下方式使用 setTimeout 函數(shù)：setTimeout(callback, delay); 其中 callback 是您希望在指定的毫秒延遲后執(zhí)行的函數(shù)。
在 Node.js 中使用 setTimeout 的最佳實(shí)踐有哪些？

一些最佳實(shí)踐包括使用命名函數(shù)作為回調(diào)函數(shù)，優(yōu)雅地處理錯誤，并了解事件循環(huán)的行為以避免意外延遲或阻塞。此外，請考慮使用 setImmediate 在下一個事件循環(huán)周期中立即執(zhí)行。