使用延迟的SetTimeout JavaScript倒计时计时器

Question

你好，我对以下代码感到困惑：

JSfiddle 链接

for (var i=6;i>=0;i--)
    {
       
        setTimeout((function(i)
              {
                  
            $("div").delay(4000).html(i);
            alert(i); //if commented unable to see the countdown
            
              })
            (i),4000);
        //alert(1);
        
    }
        

我无法获得倒计时器...出了什么问题...当"alert"被注释掉时，无法看到倒计时数字。请有人解释一下上述代码的工作原理...发布一些正确的代码。

- NiRUS

---

请问有人可以解释一下为什么上面的代码不起作用吗？ - Alnitak

Answer 1

1. .delay()仅适用于jQuery动画方法，而不适用于一般的jQuery方法，如.html()

2. 你所有的超时都会同时被触发 - 没有任何东西来使它们间隔一段时间。

结果是（没有alert）循环的每次迭代都会立即运行，导致包含0的div在之前的迭代中短暂地包含了其他数字，但这些数字是看不见的。

可以尝试使用以下代码：

function counter($el, n) {
    (function loop() {
       $el.html(n);
       if (n--) {
           setTimeout(loop, 1000);
       }
    })();
}

counter($('div'), 6);

请查看http://jsfiddle.net/alnitak/t3AA8/。

- Alnitak

---

是的，我同意这一点。延迟不是我的问题。但是在我上面的问题中，当我有警报时，它运行得很好。当我将其注释掉时，它变得混乱了。执行是如何发生的？ - NiRUS

“alert” 很可能只是给系统一些时间来处理超时事件。你应该使用 “console.log” 来进行调试，而不是使用 “alert”。 - Alnitak

好的，我使用了console.log而不是alert。我在日志中得到了所有数字6到0。但是我无法使用延迟和超时在div标记中看到相同的内容。请您在JSfiddle上检查代码并解释事情是如何触发的。谢谢。 - NiRUS

就像我告诉你的那样，大多数jQuery方法都不支持.delay()。你可以从6..0调用该代码，并且如果没有alert，它将立即到达0迭代并使用该值覆盖div。你真的尝试过我的代码吗？ - Alnitak

是的，我尝试过并在我的程序中使用了它。谢谢你...据我所知，JavaScript 的执行不是按顺序进行的... - NiRUS

@Nirus 实际上，_所有的事情_都是按顺序发生的。唯一的例外是像setTimeout这样的东西会导致函数被添加到队列中，当浏览器没有忙于处理您的代码时，它会从该队列中删除函数并执行它们。这一切都非常确定性。 - Alnitak

Answer 2

不要使用alert，因为alert会停止所有操作。请使用console.log

- user2195741