Question

我有一个带有表单的方法，有多少输入字段是变化的。该表格有一个计时器。在输入时，计时器将开始运行，我如何检测到所有表格都已填写。一旦所有输入都已填写，如何停止计时器？

self.tm.start（）在.on（'input'，function（）

之后立即启动计时器

        inputField(i) 
    {
        let self = this;
        let textarea = self.JSON_DATA.main_object.exercises[i].textarea;

        let div = $("<div/>", {
            class: "form-group row"
        });

        let word;
        for (let a = 0; a < textarea.length; a++) 
        {
            if (textarea[a].checked == "true") 
            {
                word = $("<input/>", {
                    class: 'form-control col-2 my-1 mx-1'
                }).on('input', function(){
                    //Timer start
                   self.tm.start()
                    if ($(this).val() == textarea[a].word)
                     {
                        $(this).nextAll('input').first().focus();
                        $(this).addClass('btn-success').attr("disabled", true)
                     }});
            } else {
                word = $("<span/>", {
                    class: 'col-form-label mx-1'
                    }).html(textarea[a].word);
            }
                div.append(word);
        }
                    return div;       
    }

计时器

/**
 *  var t = new TIMER([ID]/[CLASS]);
 *  (object) target is the element on which the timer will be displayed
 */

function TIMER(target) {
    var self = this;
    self.timer = false;
    self.sec = 0;

    /**
     *  Initiates TIMER on target-element(s)
     */
    self.init = function () {
        var style = $('<style></style>').attr('type', 'text/css').html(target + ' .inline{display: inline-block}');
        $('head').append(style);
        self.sec = 0;
        $(target).html('');
        var minutes = $('<div/>', {
            id: 'minutes',
            class: 'inline'
        }).css({
            'padding-right': '6px'
        }).html(self.pad(parseInt(self.sec / 60, 10)));

        var seconds = $('<div/>', {
            id: 'seconds',
            class: 'inline'
        }).css({
            'padding-left': '6px'
        }).html(self.pad(self.sec % 60));

        $(target).append(minutes, ':', seconds).css('font-size', '2.0em');

    };

    /**
     *  (int) val
     *  Puts a leading 0 in front if val < 10
     */
    self.pad = function (val) {
        return val > 9 ? val : "0" + val;
    };

    /**
     *  Start TIMER with interval of 1000ms
     */
    self.start = function () {
        if (self.timer === false) {
            self.timer = setInterval(
                    function () {
                        $("#seconds").html(self.pad(++self.sec % 60));
                        $("#minutes").html(self.pad(parseInt(self.sec / 60, 10)));
                    },
                    1000);
        }
    };

    /**
     *  Stops TIMER
     */
    self.stop = function () {
        clearInterval(self.timer);
    };

    /**
     *  Stops TIMER and reinitiates it
     */
    self.reset = function () {
        self.stop();
        self.init();
    };

    /**
     * returns (string) with current min and sec
     */
    self.getTime = function () {
        return self.pad(parseInt(self.sec / 60, 10)) + ':' + self.pad(self.sec % 60);
    }

    self.init();
}

self.tm.stop（）将停止计时器，但是我该如何执行呢？

Answer 1

好的，解决了我自己的问题。

我做了2个类变量。我在构造函数中称呼这些

       this.timeStop = 0;
       this.timeStop1 = 0;

然后这是我的输入功能



    inputField(i) 
    {
        let self = this;
        let textarea = self.JSON_DATA.main_object.exercises[i].textarea;

        let div = $("<div/>", {
            class: "form-group row"
        });

      let word;
        for (let a = 0; a < textarea.length; a++) 
        {
            if (textarea[a].checked == "true") 
            {
                word = $("<input/>", {
                    class: 'form-control col-2 my-1 mx-1',
                    id:'answerField'
                }).on('input', function() {
                    self.tm.start() // Timer start
                    if ($(this).val() == textarea[a].word){
                        self.timeStop++; // COUNTING VARIABLE 1
                        $(this).nextAll('input').first().focus();
                        $(this).addClass('btn-success').attr("disabled", true);
                        self.check_answers();
                    }});
                this.timeStop1++; // COUNTING VARIABLE 2
                self.checkAnswers(); // CALLING METHOD TO SEE IF VARIABLES ARE EQUAL TO EACHOTHER
            } else {
                word = $("<span/>", {
                    class: 'col-form-label mx-1'
                    }).html(textarea[a].word);
            }
                div.append(word);
        }
                    return div;       
    }

我计算前面两个变量。每个输入字段的if语句中的一个。另一个在for循环中，但在if语句之后。

然后我有另一种方法来检查它们是否彼此相等并停止计时器。

    checkAnswers(){
        let self = this;

        if (this.timeStop == this.timeStop1) {    
            self.tm.stop();   
        }
    }

如果所有输入均已填写，如何停止计时器

1 个答案: