函数被调用两次或三次

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

}