无法一个接一个地调用jquery函数

时间:2013-09-28 19:29:23

标签: javascript jquery timer

我的应用看起来像这样:

Here is the fiddle what I tried。我想在当前运动计时器结束时自动播放下一个运动时间但是目前在这个小提琴中它要求点击播放按钮以启动新的运动计时器。

另外,我想在第一个音频即音频资源之后播放5个声音计数(1,2,3,4,5)。

这是我的代码:

function myApp($tier) { 
  this.paused = false;
  this.paused = true // set pause to true (stop)
  this.isactive = false; // countdown is active
this.timer = $tier;
  return this.observer(); // call and return the "observer" method of the "myApp" class
}

myApp.prototype.observer = function() { // observer method
  var self = this; // set this to self (this is the current instance of this class)

  $('#btn_start').on('click', function(event){ // where an user click on "btn_start"
    event.preventDefault();
    self.play('mp3'); // call the play method and store the state in a public var
    self.countdown(self.onEnd); // 30 is the audio duration - second parameter is the callback when the audio is finished
    self.isactive = true;
  });
  return this; // return this instance
};

myApp.prototype.play = function() { // play method
  var song = document.getElementById('audiosource');
  if (this.paused === true)
  {
    console.log('play song');  $("#btn_start").addClass('btn-pause'); 
    song.play(); 
    this.paused = false;

  }
  else
  { 
    console.log('pause song');$("#btn_start").removeClass('btn-pause'); 
    song.pause(); 
    this.paused = true;
  }
  return this;
};

myApp.prototype.countdown = function(callback) { // countdown method
  var self = this, // class instance
       countdown = null, // countdown
       ctx = null; // setIntervall clearer

  if (this.isactive === true) // if this method yet called
  {
    return false;
  }
  countdown = function() {
      console.log('start countdown:' + self.paused);
    if (self.timer === 0)
    {
       clearInterval(ctx);
       callback.call(this);
       return false;
    }
    if (self.paused === false) // if not in pause
    {
      self.timer -= 1;
      console.log(self.timer);
       var msec=rectime(self.timer);
      $('#timer > span').html(msec); 
    }
  };
  ctx = setInterval(countdown, 1000);
};

myApp.prototype.onEnd = function() {
   // when the audio is finish..
    $("#btn_start").removeClass('btn-pause');
    alert ('end of the first exercise, NOw lets play the second exercise for your with    another by loading its time'); 
    new myApp('10'); 
    $('#timer > span').html(rectime('10'));
};
$(function() {
 new myApp('4'); 
 $('#timer > span').html(rectime('4')); 
});



function rectime(secs) {
var hr = Math.floor(secs / 3600);
var min = Math.floor((secs - (hr * 3600))/60);
var sec = secs - (hr * 3600) - (min * 60);

while (min.length < 2) {min = '0' + min;}
while (sec.length < 2) {sec = '0' + min;}
if (hr) hr += ':';
return hr + min + ':' + sec;
 }

0 个答案:

没有答案