在将函数作为参数传递时使用字符串

Question

以下脚本（由Adam Khoury提供 ）创建了一个计时器，该计时器在完成时给出一条消息。 该功能对我来说很有意义，但是我在这里很难理解字符串的用法。 尤其：

1）为什么必须将'countDown('+secs+',"'+elem+'")'作为字符串传递？ 在其他示例中，setTimeout可以接受一个函数（不带“引号”）。

2）同样，在同一行中，为什么必须将elem作为字符串传递（使用“引号”）？ 似乎elem变量已经包含一个字符串值，即id的名称（ "status" ）

如果您对此有任何了解，或者有错误的观念可以纠正，我将不胜感激！

<script type="text/javascript">
function countDown(secs,elem) {
var element = document.getElementById(elem);
element.innerHTML = "Please wait for "+secs+" seconds";
if(secs < 1) {
clearTimeout(timer);
element.innerHTML = '<h2>Countdown Complete!</h2>';

}
secs--;
var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
}
</script>
<div id="status"></div>
<script type="text/javascript">countDown(10,"status");</script>

Answer 1

为什么必须将'countDown('+secs+',"'+elem+'")'作为字符串传递？

不必那样传递。 尽管setTimeout接受字符串，但您应避免传递字符串。 当您以某种方式尝试使用对象调用回调函数时，将很快看到其局限性。 传递函数是一种更好的方法。

同样，在同一行中，为什么必须将elem作为字符串传递（使用“引号”）？ 似乎elem变量已经包含一个字符串值，即id的名称（“状态”）

是的， elem已经是一个字符串，但是如果省略引号，则会创建一个字符串，例如

'countDown(10, status)'

如果setTimeout稍后评估字符串，它将尝试访问变量status ，该status不存在。 这就是为什么您想要最终的字符串看起来像

'countDown(10, "status")'

为此，您必须添加引号。

---

因此，更清洁的实施方式是

var timer = setTimeout(function() {
    countDown(secs, elem);
}, 1000);

请注意，该代码实际上无法正常工作。 timer变量的作用域错误，没有任何效果，即使secs < 1仍将调用setTimeout 。

可能应该是这样的：

function countDown(secs,elem) {
    var element = document.getElementById(elem);
    if(secs < 1) {
        element.innerHTML = '<h2>Countdown Complete!</h2>';
        return;
    }
    else {
         element.innerHTML = "Please wait for "+secs+" seconds";
    }
    setTimeout(function() {
        countDown(secs - 1, elem);
    }, 1000);
}

Answer 2

最佳实践

setTimeout(function(){

countDown(secs,elem);

},3000)