0

以下脚本（由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>
4

2 回答 2

3

为什么必须'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);
}
于 2013-09-12T05:27:11.697 回答
0

最佳实践

setTimeout(function(){

countDown(secs,elem);

},3000)
于 2013-09-12T05:28:45.463 回答