Question

这个简单的代码应该从0到无穷大计数，并且应该每100毫秒显示下一个数字。问题是，当我在Chrome中打开该数字时，其数字停留在0。有人可以解释为什么会发生这种情况以及我做错了什么吗？

function count(a)
{
    var no=a;
    no++;

    document.getElementById("num").innerHTML=no;
    setTimeout("count(no)",100);
}

<html>
<head>
  <meta charset="utf-8"/>



</head>
<body onload="count(-1);">

  <div id="num"></div>

</body>
</html>

Answer 1

如果将 string 传递给setTimeout，它将在 global 范围内作为代码文字执行。在全局作用域中，变量no不存在，因为它是作用于函数count的变量。

您将希望以这种方式传递回调：

setTimeout(count, 100, no);

这将传递函数对象count和no的当前值作为参数，在调用时将传递给count。

Answer 2

问题是您要向setTimeout传递字符串。正如the MDN documentation for setTimeout所述：

字符串文字是在全局上下文中求值的，因此当将字符串作为代码求值时，调用setTimeout()的上下文中的本地符号将不可用。

也就是说，在count返回100毫秒后，将在全局上下文中评估"count(no)"。 count是全局函数，但是no只是局部变量。没有全局符号no。

要解决此问题，请不要使用字符串。将函数传递给setTimeout：

setTimeout(function () { count(no); }, 100);

function () { count(no); }部分是所谓的 closure ，该函数使用来自周围范围的局部变量。这样，即使在包含变量返回后，也可以引用诸如no之类的局部变量。

理论上你也可以做

setTimeout(count, 100, no);

但是MDN警告：

请注意，在Internet Explorer中，无法使用第一种语法将其他参数传递给函数。

Answer 3

不要将函数引用用引号引起来，而是传递一个调用count的匿名函数（并将对no的引用作为 closure < / em>）：

function count(a) { var no = a; no++; num.textContent = no; setTimeout(function() { count(no); }, 100); }

<body onload="count(-1)"> <div id="num"></div> </body>

Answer 4

您不使用setTimeout方法。延迟之后，它仅调用一次输入函数。要进行多次通话，请使用 setInterval函数。将“超时”替换为“间隔”。另外，由于您只想从给定的数字-1递增，因此一种简单的方法是将其放入全局变量，然后使用setInterval方法一遍又一遍地进行递增。

代码可以是这样的。

<script>
let a = -1;
function count() {
document.getElementById("num").innerHTML = (++a);
}
setInterval(count,100);
</script>

Answer 5

尝试

<script type="text/javascript">
    var no = 0;
    function count()
    {
            no++;
            document.getElementById("num").innerHTML=no;

    }
    setInterval(count, 100);
</script>

<body>

    <div id="num"></div>

</body>

setTimeout循环中的数字不更新

5 个答案: