JavaScript 'setInterval()' 没有按预期工作

Question

如果我只是做changeImage(); 它工作正常，但我不知道如何让setInterval()工作。 这是我的代码：

HTML：

<div id="coin1"></div>

JS：

$(document).ready(function() {
  function changeImage() {
    if ($("#coin1").css("display") == "none") {  
      $("#coin1").fadeIn("slow");
    } else {  
      $("#coin1").fadeOut("slow");
    }
  };
  
  setInterval("changeImage()", 2000);
});

Answer 1

因为您在$(document).ready()定义changeImage() ，它不是全局定义的，因此不会被 setInterval 调用。 改用函数的名称，即：

setInterval(changeImage, 2000);

希望这会有所帮助。

Answer 2

明确地说，因为接受的答案确实显示了正确的代码但解释不正确，问题不在于：

...您正在$(document).ready()定义changeImage() $(document).ready() ...

您完全可以在$(document).ready()的范围内定义函数。

问题是您正在传递一个字符串 – setInterval("changeImage()", 2000); – 作为setInterval()的第一个参数而不是用作回调的函数。 根据接受的答案的代码（但不是解释），使用setInterval()的正确方法就像setInterval(changeImage, 2000); . 请注意，此处未使用括号。 这是因为您希望将函数本身作为参数传递，而不是函数在调用时返回的任何内容。

唯一的原因，你正在使用的代码发生在工作的时候你外面移动它的范围$(document).ready()是因为当你传递一个字符串，解释被强制运行eval()反对字符串，并且eval()发生在全局范围内。

因此，虽然可以使用字符串来解决问题，但这并不是好的编码。 根据setInterval() 的文档：

可选语法允许您包含一个字符串而不是一个函数，该函数每延迟毫秒编译和执行一次。 不推荐使用此语法的原因与使用eval()存在安全风险的原因相同。