JavaScriptのカウントダウンsettimeout

Question

imは、1秒間隔でボタンの値を3から1に変更する簡単なJavaScriptカウントダウンタイマーを作ろうとしています。コードは動作していますが、多くの機能が使用されています。私はそれをより少なく使うことができるかどうか疑問に思っていた。 iveはi値を表示するforループにカウントダウンを入れようとしましたが、正しく機能していないようです。

HERESに私のコード：このことについて

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(); 
} 

Answer 1

方法：

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); 
} 

Answer 2

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); 

} 

は、このようなこの

Answer 3

何かをしようと？

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); 
} 

Answer 4

これは、カウントダウンだけでなく、どのメッセージでも機能する一般的な方法です。もちろん、あなたが長いカウントダウンを持っている場合、それは良いことではありません - しかし、あなたの現在のメッセージ・ツー・カウンタ比で私はそれが良い解決策だと言うだろう：

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/

Answer 5

：

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); 

Answer 6

、再帰を使用してのような何か試してみてください：

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() 
} 
} 

をthis jsfiddle

Answer 7

私はこのソリューションをChrome Debuggerツールでテストしました。コンソール上の出力を見るには、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 

Answer 8

これは動作します（クロームでテスト）

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(); 
}