构造函数"creates" 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. setIntervalhttps://developer.mozilla.org/pl/docs/web/api/window/setInterval

2. setTimeouthttps://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秒后打电话，因此，如果您想停止，以便需要使用Clear Interval。

Answer 4

来自W3School文档：

定义和用法

setInterval((方法调用函数或以指定的间隔(以毫秒为单位(评估表达式。

setInterval((方法将继续调用该函数，直到调用clearInterval((或关闭窗口。

SetInterval((返回的ID值用作ClearInterval((方法的参数。

提示：1000 ms = 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的非常强大的功能。