javascript - 使用 setInterval 一个一个地打印数字，我得到 Uncaught ReferenceError

Question

我想一一打印数字 1 到 4 以下是我的代码:

脚本

<script>
$(document).ready(function(){
var b=1;
function cal(){

$('#print').html(b + '<br/>');
b++;
};
setInterval("cal()",5000);
})
</script>

HTML

<div id="print"></div>

但它不工作，显示以下错误:

Uncaught ReferenceError: cal is not defined

为什么会这样，我该如何解决？

Answer 1

修复

如何使用setInterval

这是使用 setInterval() 的正确方法(稍后解释) :

setInterval(cal, 5000);

编写这段代码的可能方式

$(document).ready(function(){
    var b = 0;
    function cal() {
        b++;
        $('#print').html(b + '<br/>');
        if (b === 4) {
            clearInterval(to);
        }
    };
    var to = setInterval(cal, 5000);
});​

jsFiddle Demo

当然还有可以改进的地方，比如可以缓存$('#print')。您不需要每次都获取它。

...
var $print = $('#print'); //save it to a variable
function cal() {
    b++;
    $print.html(b + '<br/>'); //use the cached version
    ...

---

问题

字符串而不是函数 -> eval!

虽然您在技术上可以 pass a string to setInterval as its first parameter ，它等于使用 eval。据我们所知，eval is evil ，只有当你真的知道自己在做什么时才使用它。这同样适用于 setTimeout。不管what you have seen on w3schools和其他过时的资源，你不应该将字符串传递给这些方法。传递一个函数。

eval 与 setInterval 的作用域

将 eval 与 setInterval() 一起使用的问题之一是它会尝试在全局范围内的字符串中运行您的代码，这就是您得到的原因错误。 setInterval 在 window 上定义，并在其范围内运行。你在传递给 document.ready() 的闭包范围内，并且函数是在这个范围内定义的。 eval 尝试在它不存在的全局范围内找到它。