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

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

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

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

setTimeout 使用示例

以下代碼塊顯示了一個(gè)簡(jiǎn)單的示例，該示例將在 2 秒（2000 毫秒）的超時(shí)后將消息打印到控制臺(tái)：

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

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

語(yǔ)法

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

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

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

setTimeout 與 window.setTimeout

您會(huì)注意到，有時(shí)語(yǔ)法中包含 window.setTimeout。這是為什么呢？

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

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

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

setTimeout 方法的使用示例

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

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

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)險(xiǎn)。
• 它比替代方案慢，因?yàn)樗仨氄{(diào)用 JS 解釋器。

傳遞參數(shù)給 setTimeout

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

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

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

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

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

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

替代方法

從文章頂部的語(yǔ)法可以看出，傳遞參數(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 上提供了一個(gè) polyfill。

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

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

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

此輸出的原因是，在第一個(gè)示例中，this 指向 dog 對(duì)象，而在第二個(gè)示例中，this 指向全局 window 對(duì)象（它沒(méi)有 sound 屬性）。

為了解決這個(gè)問(wèn)題，有各種方法……

顯式設(shè)置 this 的值

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

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])

使用庫(kù)

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

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

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

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

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

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

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

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

使用箭頭函數(shù)：

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

在第二個(gè)示例中，this 指向全局 window 對(duì)象（同樣，它沒(méi)有 sound 屬性）。

這在將箭頭函數(shù)與 setTimeout 一起使用時(shí)可能會(huì)讓我們陷入困境。之前我們看到了如何為 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ù)時(shí)，這將不起作用，因?yàn)榧^函數(shù)沒(méi)有它自己的 this 值。該方法仍將記錄 undefined。

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

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

考慮這樣的代碼：

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

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

setTimeout(makeTalk, 1000, randomAnimal);

如果您想了解箭頭函數(shù)的入門(mén)知識(shí)，請(qǐng)閱讀“ES6 箭頭函數(shù)：JavaScript 中簡(jiǎn)潔的語(yǔ)法”。

取消計(jì)時(shí)器

正如我們?cè)谖恼麻_(kāi)頭了解到的那樣，setTimeout 的返回值是一個(gè)數(shù)字 ID，可與 clearTimeout 函數(shù)結(jié)合使用以取消計(jì)時(shí)器：

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

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

總結(jié)

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

setTimeout JavaScript 函數(shù)的常見(jiàn)問(wèn)題解答

• setTimeout 在 JavaScript 中是什么？

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

• setTimeout 如何工作？

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

• 使用 setTimeout 的替代方法有哪些？

  是的，有替代方法，例如 setInterval，它會(huì)以指定的間隔重復(fù)執(zhí)行函數(shù)，以及較新的 requestAnimationFrame，它用于更流暢的動(dòng)畫(huà)和更好的瀏覽器性能。

• 什么時(shí)候不應(yīng)該使用 setTimeout？

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

• 我可以取消 setTimeout 操作嗎？

  是的，您可以使用 clearTimeout 函數(shù)取消計(jì)劃的超時(shí)。它將 setTimeout 返回的超時(shí) 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í)行。但是，計(jì)時(shí)器的實(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)雅地處理錯(cuò)誤，并了解事件循環(huán)的行為以避免意外延遲或阻塞。此外，請(qǐng)考慮使用 setImmediate 在下一個(gè)事件循環(huán)周期中立即執(zhí)行。

(請(qǐng)注意，由于輸入文本中包含 CodePen 的鏈接，我無(wú)法直接在輸出中呈現(xiàn) CodePen 的內(nèi)容。您需要訪問(wèn)文中提供的鏈接來(lái)查看 CodePen 演示。)

以上是Settimeout JavaScript函數(shù)：指南示例的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！