这里如何调用 setInterval？

Posted 2023-02-19

技术标签:

【中文标题】这里如何调用 setInterval？【英文标题】：How is setInterval invoked here? 【发布时间】：2022-01-08 21:28:34 【问题描述】：

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

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

函数声明changeColour(); 用于通过使用colours.length 计算其在数组中的路径，然后将数组值放入HTML 中，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);这一行

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

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

我的问题：

既然这个方法只是存储在变量myTimer中，那么如何调用它呢？

【问题讨论】：

方法没有存储在变量里面。该方法的返回是；在这种情况下，setInterval 返回该间隔的数字标识符，然后可用于清除该间隔（在 onclick 中完成）。这可以通过阅读the documentation来实现。 setInterval 该方法返回唯一标识区间的区间ID 至少相关？ What is the difference between a function call and function reference? 作为最后一个问题。 let myTimer = setInterval(changeColour, 3000); 还是函数表达式吗？或者它被归类为其他东西？ 【参考方案1】：

不，你的理解是错误的。

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

var myTimer = setInterval(() => console.log('ping'), 3000);

setTimeout(() => clearInterval(myTimer), 10000);

console.log('myTimer value: ', myTimer);

【讨论】：

所以clearInterval(myTimer) 调用了它？如果是这样，为什么即使 onclick 事件没有发生它仍然运行？ @martin958 - 不，setInterval被sn-p中的第一行代码调用，其返回值存储在myTimer中。 clearInterval(myTimer) 取消通过调用 setInterval 启动的间隔计时器。你的意思是setInterval被这条线调用let colourChanger = document.getElementById ("colour-changer");？ @martin958 No. setInterval 由设置变量 myTimer 的行调用。【参考方案2】：

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

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

现在这个IntervalID 用于在future 中的每个3 seconds 中停止执行你的函数。

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

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

【讨论】：

是的，因为函数被分配给f，因为它是函数声明，但setInterval它本身是一个函数调用setInterval(changeColour, 3000);你正在调用setInterval函数而不是声明它所以它内联执行并返回 ID。当 let f = function foo()console.log("Hello");; 时为什么 setInterval 是一个函数调用只是一个声明？ @martin958 因为在f=function foo() 你有关键字 function 上面写着“这是在声明一个函数” 所以如果省略了function关键字会调用let f=foo () ？不，这将给出unexpected token 错误（即语法错误）。如果你让它let f = foo(); 那么它会给foo is not defined【参考方案3】：

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

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

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

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

let myTimer = setInterval(changeColour, 3000);

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

let x = example();

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

该代码仅引用而不调用 changeColour 函数（其后没有 (/*...*/)）。这样做会将changeColour 传递给setInterval，以便setInterval 知道每三秒左右调用什么函数。

因此，在该代码中，setInterval 被调用，而 changeColour 只是被引用（稍后由计时器机制调用）。