leo1394 / validator.js Goto Github PK

Having tried validator test with configuration as follows:

 /* vldSettings assign each dynamicVld with true*/
    this.validator = new Validator(vldSettings, {timer: true});

I come to find that interval timer isn't cleared, which has been setup in dynamically validating, when object of validator finished its job of validating and destroyed together with object containing this validator.

source code(Validator-1.0.2) from line 484 on in function _init, interval timer has been setup for dynamic limiter check.

    /* 使用定时器还是事件绑定 */
        if (opts.timer) { //使用定时器
            //动态验证的定时器
            if (dynamicVlds.length != 0) {
                setInterval(function() {
                    for (var i = 0; i < dynamicVlds.length; i++) {
                        me._dynamicCheck(dynamicVlds[i]);
                        if(dynamicVlds[i].limiter){
                            dynamicVlds[i].textLimiter.count();
                        }
                    }
                }, CHECK_INTERVAL);
            }
            //出错时检验的定时器
            if (opts.checkOnError) {
                setInterval(function() {
                    for (var i = 0; i < validations.length; i++) {
                        if (validations[i].onError) { //onError专用于定时验证,不用passed是为了焦点不离开输入框时不取消定时器
                            me.validate(validations[i]);
                        }
                        if(validations[i].limiter){
                            validations[i].textLimiter.count();
                        }
                    }
                }, CHECK_INTERVAL);
            }

As we all know, Javascript engines only have a single thread, forcing asynchronous events (such as clicks and timers) queue waiting for execution. Timers (setTimeout(), setInterval()) in Javascript would call the specified function after the delay then end up or continually call untill it is cleared or canceled.

Description

An error, "index out of bounds", is thrown after I try to setup dynamic limiter check and take the option of timer, instead of the default (check only when event triggered), both of which already have been implemented by Validator.

validator settings in my trial are configured somehow like that:

  /* in vldSettings, each "dynamicVld" has been assigned with true*/
   this.validator = new Validator(vldSettings, {timer : true});

Analysis

it's quite easy to find that code (Validator-1.0.2) from line 509 to 515 is the very cause, which failed to save state of index 'i'.

 /* limiter更新 */
            for (var i = 0; i < validations.length; i++) {
                if (validations[i].textLimiter) {
                    validations[i].$el.on("keydown, paste, blur, input", function(){
                        validations[i].textLimiter.count();
                    })
                }
            }

In the loop, this doesn't work as what is expected, because the value of i never gets locked in . instead, every handle function, after any event bound has been triggered, can only find the value of i actually is validations.length at that point.

Solution

Command for are excuted sequentially, the aim of all validation would not be achieved until 'for' loop finished. at that time, the value of i has been assign with validations.length. while event handle functions could be called, after event is triggered

One kind solution,save the sate of closure by Immediately-Invoked Function Expressions(IIFE), validator could take into consideration, shown as below:

 /* limiter更新 */
for(var i = 0; i < validations.length; i ++){
    (function(lockedInIndex){
        validations[i].$el.on("keydown, paste, input, blur", function(){
            validations[lockedIndex].textLimiter.count();
        }
    })(i);
}

Just like when arguments may be passed when functions are invoked by their named identifier, they may also be passed when immediately invoking a function expression. And because any function defined inside another function can access the outer function’s passed-in arguments and variables (this relationship is known as a closure), an Immediately-Invoked Function Expression(IIFE) can be used to “lock in” values and effectively save state.