構造函數在JS中“創建”無限循環

Question

我注意到構造函數中有些奇怪的行為。 這段代碼無限循環，我不知道為什么。

 function thing(){ this.start=function (){console.log(this.msg)}; this.msg="Starting..."; setInterval(() => {this.start()},1000) } 

 <button onclick="new thing()">Create a new thing!</button> 

我已經搜索過此內容，但沒有發現任何能解釋這一點的內容。 請有人幫助我並回答為什么會這樣。

謝謝。

Answer 1

您確定要使用setInterval而不是setTimeout嗎？ 前者將每1秒調用一次this.start ，而后者將在1秒后調用一次。請查看以下說明這兩個功能的鏈接：

1. setInterval https://developer.mozilla.org/pl/docs/Web/API/Window/setInterval

2. setTimeout https://developer.mozilla.org/pl/docs/Web/API/Window/setTimeout

正確的代碼段應為：

 function thing(){ this.start=function (){console.log(this.msg)}; this.msg="Starting..."; setTimeout(this.start(), 1000) } 

 <button onclick="new thing()">Create a new thing!</button> 

Answer 2

這樣做是因為setInterval()設置了一個...您猜對了！ Interval ，它將以您設置的時間間隔（在本示例中為1000ms ）繼續執行其內容。

setTimeout()將以設置的延遲延遲一次執行。

Answer 3

是的，setInterval將在1秒后調用，因此如果要停止，則需要使用clearInterval。

Answer 4

從W3School文檔中：

定義和用法

setInterval（）方法以指定的時間間隔（以毫秒為單位）調用函數或計算表達式。

setInterval（）方法將繼續調用該函數，直到調用clearInterval（）或關閉窗口為止。

setInterval（）返回的ID值用作clearInterval（）方法的參數。

提示：1000毫秒= 1秒。

提示：要在指定的毫秒數內僅執行一次函數，請使用setTimeout（）方法。

因此，您可能需要執行以下操作：

 function thing(){ this.start=function (){console.log(this.msg)}; this.msg="Starting..."; setTimeout(() => {this.start()}, 1000) } 

 <button onclick="new thing()">Create a new thing!</button> 

Answer 5

setInterval實際上應該開始一個間隔（定時循環）。

另外，您正在執行函數而不是綁定它:)常見錯誤。

onclick="new thing()"

https://developer.mozilla.org/de/docs/Web/API/WindowTimers/setInterval

您的代碼可以更簡單地完成：

const start = () => setTimeout( () => console.log(200), 1000)

<button onclick="start">Start!</button>

在大多數情況下，您不需要JS中的對象。 作為一流對象的功能是JS的一項非常強大的功能。