功能被稱爲兩倍或三倍時間

Question

該流程有4個步驟。一旦該步驟完成，它將調用另一步的功能。它在第一次正確運行思考流程。

我的確嘗試在每個函數中控制步驟。並且在整個流程運行一次後，階段2和之後的函數被重複調用。我應該解除每一步中的任何功能，以便函數不會被一次又一次地調用嗎？

var index_Function = { 
settings: { 
    body: $("body"), 
    wrapper: $("#wrapper"), 
    option: null, 
    cameraCounter: 5, //seconds 
    qrCounter: 5 //seconds 
}, 
step0Handler: function() { 
    var $this = this; 
    var $wrapper = this.settings.wrapper; 
    var $container = $wrapper.find("section.stage-0"); 

    var $start_btn = $container.find(".start-btn"); 

    if($wrapper.hasClass("stage-0")){ 
     $start_btn.click(function(){ 
      $wrapper.removeClass("stage-0").addClass("stage-1"); 
      $this.step1Handler(); 
     }); 
    } 

}, 
step1Handler: function() { 
    var $this = this; 
    var $wrapper = this.settings.wrapper; 
    var $container = $wrapper.find("section.stage-1"); 

    var $option_btn = $container.find("a"); 

    if($wrapper.hasClass("stage-1")){ 
     console.log("stage-1"); 
     $option_btn.click(function(){ 
      $wrapper.removeClass("stage-1").addClass("stage-2"); 
      $this.step2Handler(); 
     }); 
    } 
}, 
step2Handler: function() { 
    var $this = this; 
    var $wrapper = this.settings.wrapper; 
    var $container = $wrapper.find("section.stage-2"); 

    var $cameraCounter = this.settings.cameraCounter; 
    var $counter = $container.find(".countdown"); 
    var $interval = null; 

    if($wrapper.hasClass("stage-2")){ 
     console.log("stage-2"); 
     console.log("option: "+ this.settings.option); 

     $counter.text($cameraCounter); 
     $interval = setInterval(function() { 
      $cameraCounter--; 
      if ($cameraCounter > 0) { 
       $counter.text($cameraCounter); 
      }else if ($cameraCounter === 0) { 
       clearInterval($interval); 
       $wrapper.removeClass("stage-2").addClass("stage-3"); 
       $this.step3Handler(); 
      } 
     }, 1000); 


    } 
}, 
step3Handler: function() { 
    var $this = this; 
    var $wrapper = this.settings.wrapper; 
    var $container = $wrapper.find("section.stage-3"); 

    var $retry_btn = $container.find("a"); 

    var $qrCounter = this.settings.qrCounter; 
    var $counter = $container.find(".countdown"); 
    var $interval = null; 

    if($wrapper.hasClass("stage-3")){ 
     console.log("stage-3"); 
     startTimer($qrCounter, $counter); 

     $retry_btn.click(function(){ 
      clearInterval($interval); 
      $this.retryHandler(); 
     }); 
    } 

    function startTimer(duration, display) { 
     var timer = duration, minutes, seconds; 
     timer--; 
     $interval = setInterval(function() { 
      minutes = parseInt(timer/60, 10) 
      seconds = parseInt(timer % 60, 10); 

      timer--; 
      if (timer > 0) { 
       display.text(minutes + "m " + seconds + "s"); 
      }else if (timer === 0) { 
       clearInterval($interval); 
       $wrapper.removeClass("stage-3").addClass("stage-0"); 
       //$this.step0Handler(); 
      } 
     }, 1000); 
    } 
}, 
retryHandler: function() { 
    this.settings.option = null; 
    var $wrapper = this.settings.wrapper; 
    console.log('retryHandler'); 
    $wrapper.removeClass("stage-0 stage-1 stage-2 stage-3").addClass("stage-1"); 
}, 
restartHandler: function() { 
    this.settings.option = null; 
    var $wrapper = this.settings.wrapper; 
    console.log('retryHandler'); 
    $wrapper.removeClass("stage-0 stage-1 stage-2 stage-3").addClass("stage-0"); 
    //clear canvas 
}, 
init: function() { 
    this.step0Handler(); 
}, 

}

Answer 1

我終於在所有點擊活動固定它通過取消綁定點擊

$start_btn.unbind('click').click(function(){ 
      $wrapper.removeClass("stage-0").addClass("stage-1"); 
      $this.step1Handler(); 
     });