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（“status”）的名称

没错，elem已经是一个字符串，但如果你省略引号，你将创建一个字符串，如

'countDown(10, status)'

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

'countDown(10, "status")'

为此你必须添加引号。

因此，更清洁的实施将是

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

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

应该是这样的：

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)

将函数作为参数传递时使用string

2 个答案: