这里如何调用 setInterval？

Question

我在带有一些 CSS 样式的 HTML 文档中附加了以下 Javascript 代码。

它只是屏幕上的一个框，它根据数组中看到的更改样式背景属性颜色。 “color-changer”的 id 用于访问 HTML 文档，并在每次迭代数组时更改它。

function 声明 changeColour changeColour(); 用于实现这一点，方法是使用colours.length计算其通过数组的路径，然后将数组值放入 HTML，它每 3 秒更改一次背景颜色。

一旦到达数组的末尾，计数器就会重置为 0，并且它会再次继续。

setInterval 方法每 3 秒调用一次回调方法changeColour()来实现这一点。

为了停止循环，添加了一个 onclick is 事件，该事件调用clearInterval()方法在框内打印出“计时器停止”。 为此，必须将setInterval()方法存储在变量myTimer 。

请参阅下面的代码。 一切正常，但这不是我真正的问题。

let colourChanger = document.getElementById ("colour-changer");
let colours = ["red","blue","green","pink"];
let counter = 0;

function changeColour(){

  if (counter >= colours.length){
   counter = 0;
  }
  
  colourChanger.style.background = colours[counter];
  counter++;

}

let myTimer = setInterval(changeColour, 3000);

colourChanger.onclick = function (){
  
  clearInterval(myTimer);
  colourChanger.innerHTML = "Timer stopped";

}

我无法理解的是let myTimer = setInterval(changeColour, 3000);

据我了解，如果您将 function 存储在变量中，除非单独调用，否则它将不会执行。 它只会坐在那里存储在变量myTimer 。

没有setInterval(); 在任何地方的变量之外进行调用。

我的问题：

那么如何调用这个方法，因为它只是存储在变量myTimer ？

Answer 1

不，你的理解是错误的。

它执行setInterval(changeColour, 3000); 并将这个特定的间隔引用 ID 存储到myTimer以便稍后在clearInterval(myTimer)中使用

 var myTimer = setInterval(() => console.log('ping'), 3000); setTimeout(() => clearInterval(myTimer), 10000); console.log('myTimer value: ', myTimer);

Answer 2

为此，必须将 setInterval() 方法存储在变量 myTimer 中。

不， setInterval的返回值由该代码存储在myTimer中。 setInterval被调用（它后面有(/*...*/) ，它调用它）。

据我了解，如果您将 function 存储在变量中，除非单独调用，否则它将不会执行。

没错，但这不是那行代码所做的。 这段代码：

let myTimer = setInterval(changeColour, 3000);

调用setInterval并将其返回值存储在myTimer ，方式完全相同：

let x = example();

调用example并将其返回值存储在x中。

它是changeColour function 仅由该代码引用而不是调用（它后面没有(/*...*/) ）。 这样做会将changeColour传递给setInterval ，以便setInterval知道 function 每三秒左右调用一次。

因此，在该代码中，调用了setInterval ，并且仅引用了changeColour （稍后由计时器机制调用）。

Answer 3

setInterval() function 将返回IntervalID ，它将设置给定milliseconds的执行间隔。

在您的情况下，一旦执行此行，它将开始每 3000 毫秒/ 3 seconds执行一次changeColour 3000ms并返回IntervalID 。

现在这个IntervalID用于在future每3 seconds停止执行您的 function 。

要停止执行，您可以使用clearInterval(IntervalID) 。

如有任何疑问，请发表评论。

Answer 4

我很困惑，因为我看到一个视频显示了这一点：

let f = function foo(){
console.log("Hello");
};

f();

这存储在一个变量中，并在被f();

此示例与 setInterval 示例有何不同？