在繼續之前等待對象構造函數中的方法完成

Question

我正在構建一個從25分鐘到0，然後從5分鐘到0計數一定次數的計時器。現在，我有一個CountDownTimer對象，其參數爲25 * 60，從25到0計數。我想要啓動一個新的定時器，一旦另一個定時器達到0，它將從5到0進行計數。如何實現這種類型的異步代碼，然後執行該異步代碼X次？

$(document).ready(function(){ 
    var sessionBreakTimer = new CountDownTimer(25*60); 
    sessionTimer.start(); 
    if (!sessionTimer.isRunning) { 
    sessionBreakTimer.start(); 
    } 
); 

function CountDownTimer(secs) { 
    var duration = secs; 
    var running = false; 

    this.start = function() { 
    running = true; 
    var startT = new Date().getTime(); 
    var intervalId = window.setInterval(function() { 
     var msDelta = new Date().getTime() - startT; // milliseconds elapsed since start 
     var secsLeft = duration - Math.floor(msDelta/1000); 
     if (secsLeft === 0) { 
     window.clearInterval(intervalId); 
     console.log("cleared"); 
     running = false; 
     } 
    }, 1000); //update about every second 
    }; 

    this.isRunning = function() { 
    return running; 
    } 

} 

Answer 1

嘗試利用Promise

var intervalId, 
 
    // current count 
 
    count = 0, 
 
    // current stop 
 
    stop = 2, 
 
    // cycles of `session` 
 
    ticks = 0, 
 
    // cycles of `session` to call 
 
    total = 2, 
 
    counter = function counter(session) { 
 
    var fn = function fn() { 
 
     // call `CountDownTimer.start()` 
 
     return new CountDownTimer(session[count]).start() 
 
     .then(function(data) { 
 
      console.log(data); 
 
      // recursively call `counter` 
 
      return counter(session) 
 
     }) 
 
    } 
 
    return count < stop ? fn() : (function() { 
 
     // increment `ticks` 
 
     ++ticks; 
 
     // reset `count` to `0` 
 
     count = 0; 
 
     return ticks < total 
 
      ? fn() 
 
      // do stuff when `ticks` equal to `total` 
 
      : Promise.resolve({ 
 
       count: count, 
 
       ticks: ticks, 
 
       total: total 
 
       }) 
 
    }()) 
 
    } 
 

 
function CountDownTimer(secs) { 
 
    var duration = secs; 
 
    var running = false; 
 
    countdown = this; 
 
    this.start = function() { 
 
    // return `Promise` object from `CountDownTimer.start` 
 
    return new Promise(function(resolve) { 
 
     running = true; 
 
     var startT = new Date().getTime(); 
 
     intervalId = window.setInterval(function() { 
 
     // milliseconds elapsed since start 
 
     var msDelta = new Date().getTime() - startT; 
 
     var secsLeft = duration - Math.floor(msDelta/1000); 
 
     console.log(secsLeft); 
 
     if (secsLeft === 0) { 
 
      window.clearInterval(intervalId); 
 
      // increment `count` 
 
      ++count; 
 
      console.log("cleared"); 
 
      running = false; 
 
      resolve({ 
 
      count: count, 
 
      ticks: ticks, 
 
      total: total 
 
      }) 
 
     } 
 
     }, 1000); //update about every second 
 
    }) 
 
    }; 
 

 
    this.isRunning = function() { 
 
    return running; 
 
    }; 
 

 
} 
 
// settings for `sessions` 
 
// set to 60 seconds, 30 seconds for stacksnippets 
 
var sessions = [1 * 60, 0.5 * 60]; 
 
// var sessions = [25 * 60, 5 * 60]; 
 

 
counter(sessions) 
 
// do stuff when all cycles of `ticks` complete 
 
.then(function(data) { 
 
    console.log("complete:", data) 
 
});

Answer 2

你可以一個callback方法添加到您的countdown並設置它，所以當你達到0秒它會調用適當的計時器。像這樣的例子：

function CountDownTimer(secs) { 
    var self = this; 
    var duration = secs; 
    var running = false; 

    this.callback = function(){}; //This will allow you to define this afterwards 

    this.start = function() { 
    running = true; 
    var startT = new Date().getTime(); 
    var intervalId = window.setInterval(function() { 
     var msDelta = new Date().getTime() - startT; // milliseconds elapsed since start 
     var secsLeft = duration - Math.floor(msDelta/1000); 
     if (secsLeft === 0) { 
     window.clearInterval(intervalId); 
     console.log("cleared", secs); 
     running = false; 
     self.callback();//your callback is being called here 
     } 
    }, 1000); //update about every second 
    }; 

    this.isRunning = function() { 
    return running; 
    } 

} 

你定義它是這樣的：

$(document).ready(function(){ 
    var sessionBreakTimer = new CountDownTimer(25*60); 
    var sessionTimer = new CountDownTimer(5*60); 
    sessionBreakTimer.callback = sessionTimer.start;//sessionTimer will be called when breaktimer is over 
    sessionTimer.callback = sessionBreakTimer.start;//and vice versa 
    sessionTimer.start(); 

}); 

http://jsfiddle.net/bw0nzw3m/1/

如果你想這是隻有執行的特定次數，你需要一個每次調用一個定時器時都要計數變量，當它結束時，將回調函數設置爲具有完成行爲的函數，或根據需要設置一個空函數。