Javascript倒计时设置超时

Javascript countdown settimeout

本文关键字：超时 设置 倒计时 Javascript      更新时间：2023-09-26

im试图制作一个简单的javascript倒计时计时器，每隔一秒将按钮中的值从3更改为1。我让代码正常工作，但它使用了许多函数。我想知道我是否可以减少它的使用量。我试着把倒计时放在一个显示i值的for循环中，但它似乎不能正常工作。

这是我的代码：

 function launch( )
{
  document.getElementById("blast").value = "Preparing to launch...";
  setTimeout ( "countdown3()", 1000 );
}
function countdown3()
{
    document.getElementById("blast").value = "3";
    setTimeout("countdown2()", 1000);
}
function countdown2()
{
    document.getElementById("blast").value = "2";
    setTimeout("countdown1()", 1000);
}
function countdown1()
{
document.getElementById("blast").value = "1";
setTimeout("GO()", 1000 );
}
function GO()
{
    document.getElementById("blast").value = "BLAST OFF";
    move();
}

这个怎么样：

function launch(seconds, id, message, callback)
{
    var target = document.getElementById(id);
    target.innerHTML = message;
    var countDownId = setInterval( function(){
       target.innerHTML = seconds;
       if(seconds == 0){
          clearInterval(countDownId);
          callback(target);          
       }
       seconds--;
    }, 1000 );
}
function GO(target)
{
    target.innerHTML = "BLAST OFF";
    move();
}
launch(3, "blast", "Preparing to launch...", GO);

这个怎么样：

function launch( )
{
    var countdown = function (index) {
        if(index > 0) {
          document.getElementById("blast").value = index;
          setTimeout (function() { countdown(index - 1) }, 1000 );
        }
        else {
          document.getElementById("blast").value = "BLAST OFF";
          move();
        }  
    };
    document.getElementById("blast").value = "Preparing to launch...";
    setTimeout (function() { countdown(3) }, 1000 );
}

这样的东西？

var i = 4;
document.getElementById("blast").value = 'Preparing to launch...';
function doIt(){
  var timerId = setInterval(function(){
    i--;
    if( i > 0 )
       document.getElementById("blast").value = i;
    else {
       document.getElementById("blast").value = 'BLAST OFF'; 
       clearInterval(timerId);
    }
  },1000);
}

这里有一种处理任何消息的通用方法，而不仅仅是倒计时。显然，如果你有更长的倒计时时间，这不是一件好事，但根据你目前的信息与计数器比率，我认为这是一个很好的解决方案：

function launch() {
    var elem = document.getElementById('blast');
    var step = 0;
    var messages = ['Preparing to launch', '3', '2', '1', 'LIFTOFF'];
    window.setTimeout(function() {
        elem.value = messages[step++];
        if(step < messages.length) {
            window.setTimeout(arguments.callee, 1000);
        }
    }, 1);
}
launch();

演示：http://jsfiddle.net/ThiefMaster/qmBXs/

尝试使用递归，比如：

var blast = document.getElementById("blast");
countdown();
function countdown() {
 var nwvalue = Number(blast.value)-1; 
 blast.value = nwvalue;
 if (nwvalue>0) {
  setTimeout(countdown, 1000 ); //- value>0: call countdown in a timeout again
 } else {
  blast.value = 'all done';     //- here you would call GO()
 }
}

请参阅此jsfiddle

这可以工作（在铬上测试）

function launch( )
{
  document.getElementById("blast").value = "Preparing to launch...";
  setTimeout ( "countdown(3)", 1000 );
}
function countdown(index)
{
    if(index==0) {
         GO();
         return
    }
    document.getElementById("blast").value = index;
    setTimeout("countdown("+(--index)+")", 1000);
}
function GO()
{
    document.getElementById("blast").value = "BLAST OFF";
    move();
}

我在Chrome调试器工具中测试了这个解决方案。将document.getElementById属性替换为console.info，并在调试器中运行它以查看控制台上的输出。

function countdown(start, duration) {
    if(start == duration) {
        setTimeout(function() {
            document.getElementById("blast").value = "BLAST OFF";
            // console.info("BLAST OFF");
        },duration * 1000);
        return;
    } else {
        setTimeout(function() {
            document.getElementById("blast").value = start;
            // console.info(start);
        }, (duration-start) * 1000);
        countdown(start+1, duration);
    }    
}
countdown(0,3);  // 3 seconds

var i =3;
function launch( )
{
  document.getElementById("blast").value = "Preparing to launch...";
  setTimeout ( function() { countDown() }, 1000 );
}
function countDown()
{
if(i<0)
   i="blast off";
document.getElementById("blast").value = i;
i--;
setTimeout("countDown()",1000);
}

试试这个

相关文章：