Question

我是javascript的新手。我写了一个简单的计数器程序，它从10开始倒计时直到达到1。

  <script type="text/javascript">
    function countDown(secs) {
        var element = document.getElementById("status");
        element.innerHTML = "Please wait for "+secs+" seconds";
        if(secs < 1) {
            clearTimeout(timer);
            element.innerHTML = '<h2>Countdown Complete!</h2>';
            element.innerHTML += '<a href="#">Click here now</a>';
        }
        secs--;
 --->       **var timer = setTimeout('countDown('secs')',1000);**
    }
    </script>
    <div id="status"></div>
    <script type="text/javascript">countDown(10);</script>

然后我尝试将参数作为'+secs+'传递给countDown函数。

var timer = setTimeout('countDown('+secs+')',1000);

以上更改有效。

我的问题是为什么我需要将参数传递为'+ secs +'而不仅仅是'secs'？它有什么不同？

Answer 1

使用

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

或

var timer = setTimeout('countDown('  + secs + ')',1000);

在你的情况下问题是你使用字符串连接而没有+符号的变量（我的第二个例子）会导致语法错误

Answer 2

您的第一次尝试是一个synax错误：

var timer = setTimeout('countDown('secs')',1000);

您正在尝试将字符串传递给setTimeout（这不是一个好主意），但您没有正确创建字符串。

单词secs周围的单引号不会被转义，因此您实际上传递的是字符串文字countDown(，后跟变量secs，后跟字符串文字{{1 }}。因为字符串之间没有运算符，所以这是无效的语法。

但是，当您使用)符号时，您将一起添加3个字符串以创建所需的方法调用（使用 <{em> + 运算符在JavaScript中连接字符串）：

+

添加的三个字符串创建一个包含有效JavaScript的字符串，因此可以将其传递给 setTimeout（）函数。

虽然可以将字符串传递给 setTimeout（），但更好的方法是传递函数引用。

这通常使用这样的匿名函数来完成：

'countDown(' + 'secs' + ')' === 'countDown(secs)'

如果您不需要传递参数，可以执行以下操作：

setTimeout(function () { countDown(secs); }, 1000);

请注意，将函数引用指定为变量时，不要使用function countDown() { alert("10... 9... 8..."); } setTimeout(countDown, 1000);符号。在JavaScript中的函数后使用括号时，将调用该函数。

Answer 3

使用setTimeout执行此操作的简便方法：

setTimeout(FunctionName,delay,arg1,arg2....);

在你的情况下，你可以这样做：

setTimeout(countDown,1000,secs);

我建议这个链接：http://javascript.info/settimeout-setinterval

Answer 4

只需编写一个闭包来执行递减，如下所示：

if (secs < 1) {
    element.innerHTML = '<h2>Countdown Complete!</h2>';
    element.innerHTML += '<a href="#">Click here now</a>';
} else {
    // wait 1 second
    setTimeout(function() {
        countDown(secs - 1); // decrement and run ourselves again
    }, 1000);
}

我还删除了clearTimeout()，支持简单的else条件。

Answer 5

setTimeout函数允许您将其他参数传递给函数。因此，您可以按如下方式重写代码：

var timer = setTimeout(countDown, 1000, secs);

除了一些旧版本的IE之外，所有主流浏览器都支持它。有关详细信息，请参阅此问题：Why does Underscore.js have a delay function?

Answer 6

Aadit有正确的想法。我需要在循环中启动多个超时，并且它们最终都将变量设置为相同的值。这是一个小提琴，说明为什么唯一一种异步工作的方法是Aadit。

http://jsfiddle.net/85fmwew4/

for(i=0;i<10;i++){
    setTimeout(function(){bad(i)}, 1000)    // bad for async
    setTimeout(good, 1000, i)               // good for async
}

Answer 7

这是唯一对我有用的东西（在node.js中将变量传递给setTimeout）：

setTimeout(function(teamNum,zeroBase,position) {
    spawnAI(roomIndex, 'scout', teamNum, position);
}, timeToSpawn,teamNum,zeroBase,position);

Answer 8

现在，在现代浏览器中进行最近的javascript优化，你可以做到：

var timer = setTimeout( countDown( secs ) , 1000 );

如何将参数传递给setTimeout函数

8 个答案: