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

我终于通过unbind点击所有点击事件来修复它

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

函数被调用两次或三次

1 个答案: