Question

我复制了Mozilla文档中给出的关于setInterval（）（https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval?redirectlocale=en-US&redirectslug=DOM%2Fwindow.setInterval#Example_1.3A_Generic）的示例＃2，但是我的JSFiddle中文本的颜色在红色和蓝色之间没有交替：

DEMO：http://jsfiddle.net/lpsternotes/JHpt9/

这不是因为我需要jQuery或者因为标记，对吧？我完全复制了它。

我还想要求澄清目的：var nIntervId;被定义为顶部的全局变量，以便它可以在changeColor（）和stopTextColor（）函数中使用，对吗？

var nIntervId; //global variable

function changeColor() {
  nIntervId = setInterval(flashText, 500);
 }

function flashText() {
  var oElem = document.getElementById("my_box");
  oElem.style.color = oElem.style.color == "red" ? "blue" : "red";
}

function stopTextColor() {
  clearInterval(nIntervId);
}

换句话说，如果代码看起来像这样：

function changeColor() {
  var nIntervId = setInterval(flashText, 500);
}

function flashText() {
  var oElem = document.getElementById("my_box");
  oElem.style.color = oElem.style.color == "red" ? "blue" : "red";
}

function stopTextColor() {
  clearInterval(nIntervId); //undefined??
}

Answer 1

您的函数在另一个函数（已执行onLoad）中定义（根据左侧JSFiddle选项中的第二个下拉菜单）。

这意味着它们的范围是该函数，而不是全局变量。

因此，它们超出了您的onload="stopTextColor();"属性。

只需在现有的onload处理程序中调用stopTextColor()，而不是使用onload属性创建的另一个调用{。}}。

Answer 2

你的小提琴很好用。只需将左侧的第二个下拉菜单更改为 onLoad 至 No Wrap - in Head 选项。

您还应该查看This链接，了解为什么。

来自Javascript Mozilla文档的setInterval（）示例在JSFiddle中不起作用

2 个答案: