$(document).ready(function(){...})中的setInterval odd(buggy?)行为;块

时间:2011-11-09 08:13:48

标签: javascript jquery

让我从这里开始。在w3cshools.com - http://www.w3schools.com/jsref/met_win_setinterval.asp - 他们有一个演示如何使用javascript setInterval函数的片段(令人惊讶的是它有一个不匹配的< / form>但那就是这一点)。

我需要使用setInterval(),有时我喜欢引用一些“标准”主体来瞥见推荐的用法。在我的开发环境中,当我在jquery $(document).ready(function(){...}); 块中使用它时,某些东西似乎在修改setInterval()行为/工作。< / p>

插图1 - 工作:典型/传统&lt;脚本&gt;块

<script type="text/javascript">
    var refreshIntervalId;

    function testMessage() {
        window.alert("Hello");
    }
    refreshIntervalId = setInterval("testMessage()", 5000);
</script>

插图2 - 不起作用: jQuery块

<script type="text/javascript">
    $(document).ready(function() {
        var refreshIntervalId;

        function testMessage() {
            window.alert("Hello");
        }
        refreshIntervalId = setInterval("testMessage()", 5000);
    });
</script>

插图3 - 工作: jQuery块 - 使用setInterval(testMessage,5000)而不是setInterval(“testMessage()”,5000)

<script type="text/javascript">
    $(document).ready(function() {
        var refreshIntervalId;

        function testMessage() {
            window.alert("Hello");
        }
        refreshIntervalId = setInterval(testMessage, 5000);
    });
</script>

事实证明,如果我尝试将函数作为字符串从 $(document).ready(function(){}); 块传递出来,我会收到错误消息,指示功能未定义。正因为如此,我们没有侧面跟踪IE,Chrome和Firefox都报告错误:

IE :Microsoft JScript运行时错误:属性“testMessage”的值为null或未定义,而不是Function对象

Chrome :未捕获的ReferenceError:未定义testMessage(匿名函数)

Firefox :未定义testMessage。

我想知道的(如果可能的话)是,这可能是标准不一致的结果,或者当我尝试使用 setInterval(“testMessage()”,5000)时会出现什么问题< / strong>来自jQuery块?可能会发生一些破坏或这是正确的行为吗?

4 个答案:

答案 0 :(得分:5)

setTimeoutsetInterval打破范围,因此在找到它时找不到testMessage(因为该函数的范围在您传递给{{1的匿名函数内部) }})。浏览器表现正常。

这是你永远不应该使用字符串格式的原因之一......或者尝试向可怕的W3Schools学习。

答案 1 :(得分:3)

浏览器说没有定义函数的原因是它没有在间隔运行的范围内定义。您已在另一个函数内部声明了该函数,因此它在间隔运行的全局范围内不存在。

这不是由于jQuery,只是由于你将代码包装成匿名函数。这段代码显示了同样的错误:

(function() {

  function testMessage() {
    window.alert("Hello");
  }

  var refreshIntervalId = window.setInterval("testMessage()", 5000);

})();

您可以全局声明该函数,然后您可以使用字符串作为区间:

function testMessage() {
  window.alert("Hello");
}

(function() {

  var refreshIntervalId = window.setInterval("testMessage()", 5000);

})();

通常的做法是在间隔调用中使用函数本身而不是字符串:

(function() {

  function testMessage() {
    window.alert("Hello");
  }

  var refreshIntervalId = window.setInterval(testMessage, 5000);

})();

如果需要将值传递给函数,可以在调用中使用匿名函数:

(function() {

  function testMessage(msg) {
    window.alert(msg);
  }

  var refreshIntervalId = window.setInterval(function() { testMessage("Hello"); }, 5000);

})();

答案 2 :(得分:1)

函数testMessage()和任何其他函数必须声明为OUTSIDE $(document).ready()

答案 3 :(得分:0)

正如@Quentin所提到的那样,因为testMessage函数是在文档中定义的,因此超出了区间的范围。

如果你必须在文件中定义你的间隔,你可以做

refreshIntervalId = setInterval(function() {
    window.alert("Hello");
}, 5000);