javascript - 4秒から0までのjqueryカウントダウン、0で次の関数に移動

Question

質問に 4 秒間 (口頭で) 回答し、回答が終わると次の質問に移る、一種のゲームをプログラムしようとしています。オーディオを再生し（ここで求めているものではありません）、4秒から0までカウントダウンし、正解を表示して次に進みます。

4 秒から 0 秒までのカウントダウンを作成し、その後次のものに移るにはどうすればよいですか?

私は次のことを試しましたが、失敗しました。

    var counter = 4;

    $('#seconds').html(counter);

    function decreaseSeconds(){
        counter--;
        $('#seconds').fadeOut('fast');
        $('#seconds').html(counter).delay(800);
        $('#seconds').fadeIn('fast');
    }

    while ( counter > 0){
         decreaseSeconds()
    }

Answer 1

デモを見る

var nextFunction = function () {
  alert('Hello.');
};

sec = 4;

interval = setInterval(function () {
  sec--;
  document.getElementById('sec').innerHTML = sec;

  if (sec == 0) {
    clearInterval(interval);
    nextFunction();
  }
}, 1000); ​

Answer 2

setTimeout を使用する必要があります

yourfirstfunction ();
setTimeout (yoursecondfunction, counter*1000);

Answer 3

純粋な JavaScript から setTimeout を使用しないのはなぜですか? http://www.w3schools.com/js/js_timing.asp

Answer 4

このようなもの: http://jsfiddle.net/collabcoders/MD6sz/2/

$(document).ready(function () {
  var secs = 4;
  ticker = setInterval(function(){
    $("#timer").html(secs + " seconds left");
    if (secs == 0) {

      //call some function when the clock hits 0
      $("#timer").html("time is up");
      clearInterval(ticker);
    }
    secs --;
  }, 1000);
});​