フロントエンドデータのリアルタイム検証

フロントエンドフォームのデータは、リアルタイムでチェックする必要があります.この中には問題があります.1.リアルタイムでチェックするときはボタンをグレーでセットする必要があります.いつボタンを明るくしますか?2.入力ボックスが複数回入力され、焦げがなくなれば、複数回の検査要求が送られます.この場合、どの要求が戻ってきたかは私たちが望んでいますか?

var idFactory = (function() {
        var id = 0;
        return function() {
            return ++id;
        }
    })();
function maxRequestIdManager() {
    var MaxRequestIdMap;
    var MaxRequestIdManager = {//      id   ，                ，               ，              。
        initMaxRequestId: function() {
            MaxRequestIdMap = {};//           id   
        },
        addMaxRequestId: function(id) {
            if (MaxRequestIdMap[id] === undefined) {
                MaxRequestIdMap[id]= 1;
            }
            else {
                MaxRequestIdMap[id]++;
            }
            return this;
        },
        getMaxRequestId: function(id) {//           id，                
            return MaxRequestIdMap[id];
        }
    };
    return MaxRequestIdManager;
}

function statusManager() {
    var _statusMap;
    var _count;
    var _constantCount;
    var _callback;
    var statusManager = {//       ，                 ，                    ，             
        initStatus: function(config) {//        ，      ，               
            var hasOwnProperty = Object.prototype.hasOwnProperty;
            var status = config.status;//       
            _statusMap = {};
            _constantCount = config.length;//    ，                     
            _callback = config.callback;//               
            _count = 0;//                  
            for (var key in status) {//   ,            status   
                if (hasOwnProperty.call(status,key)) {
                    _statusMap[key] = !!status[key];
                    if (_statusMap[key]) {//       true        
                        _count++;
                    }
                }
            }
        },
        disableStatus: function(id) {
            if (_statusMap[id] !== undefined && _statusMap[id]) {//                   
                _count--;//          count    
                _statusMap[id] = false;
            }
        },
        /*  ，        true，          ，         ，                      
             true ，            ，     ，         ，        true          ，                               。                
             true ，        ，       ，       true，      。*/
        enableStatus: function(id) {
            if (_statusMap[id] !== undefined && !_statusMap[id]) {
                _count++;
                _statusMap[id] = true;
                this.checkStatus();//                ，         
            }
        },
        getFinalStatus: function() {
            return _count === _constantCount;//                
        },
        getStatus: function(id) {//       
            return id ? _statusMap[id] : _statusMap;
        },
        checkStatus: function() {//       ，        
            if (_count === _constantCount) {
                _callback && (Object.prototype.toString.call(_callback) === '[object Function]') && _callback();
            }
        }
    };
    return statusManager;
}

function commomRequestTimesManager(){
    var _commomRequestTimes;
    var _callback;
    var commomRequestTimesManager = {//        ，                   
        initCommomRequestTimes: function(callback) {
            _commomRequestTimes = 0;
            _callback = callback;//               
        },
        addCommomRequestTimes: function() {
            _commomRequestTimes++;//     
        },
        subCommomRequestTimes: function() {
            _commomRequestTimes--;//      ，     
            this.checkCommomRequestTimes();//                        ， _commomRequestTimes  0，        
        },
        getCommomRequestTimes: function() {
            return _commomRequestTimes;//         
        },
        checkCommomRequestTimes: function() {//            ，       
            if(_commomRequestTimes === 0 ) {
                _callback && (Object.prototype.toString.call(_callback) === '[object Function]') && _callback();
            }
        }
    } 
    return commomRequestTimesManager;
}
function Checker(options) {
    this.cached = {};
    this.eleMap = {};
    this.commomRequestTimesManager = commomRequestTimesManager();
    this.maxRequestIdManager = maxRequestIdManager();
    this.statusManager = statusManager();
    this.init(options);
}

Checker.prototype = {
    constructor: Checker,
    init: function(options) {
        var self = this;
        this.bindEvent(options);
        this.statusManager.initStatus(this.getComponentStatus());//        ，      
        this.commomRequestTimesManager.initCommomRequestTimes(function() {
            if(self.statusManager.getFinalStatus()) {
                console.log('    ');
            }
        });//          
        this.maxRequestIdManager.initMaxRequestId();//       id  
    },
    bindEvent: function(options) {
        var self = this;
        $(options.items).each(function(index, item) {
            var id = idFactory();
            var target = $(item.ele);
            if (!target.length) {
                return;
            }
            target.attr('_itemId', id);
            self.eleMap[id] = item;

            target.on('blur', function(e) {
                var data = {};
                var currentTarget = $(e.target);
                var id = currentTarget.attr('_itemId');
                var value = currentTarget.val();
                var item = self.eleMap[id];
                if (item.beforeCheck && !item.beforeCheck.call(self, value)) {
                    return;
                }
                if (item.cached && self.cached[id] && self.cached[id][value]) {
                    return item.cb(self.cached[id][value]);
                }
                data[item.key || 'val'] = value;
                self.statusManager.disableStatus(id);//           
                var currentMaxRequestId = self.maxRequestIdManager.addMaxRequestId(id).getMaxRequestId(id);
                self.commomRequestTimesManager.addCommomRequestTimes();//      
                var callback =  function(id, currentMaxRequestId, resp) {
                        this.commomRequestTimesManager.subCommomRequestTimes();//      
                        if (currentMaxRequestId !=  this.maxRequestIdManager.getMaxRequestId(id)) {
                            return;
                        }
                        this.statusManager.enableStatus(id);
                        if (self.cached[id]) {
                            self.cached[id][value] = resp;
                        } else {
                            self.cached[id] = {};
                            self.cached[id][value] = resp;
                        }
                        item.cb(resp); 
                    };
                $.ajax({
                    url: item.url,
                    type: options.type || 'post',
                    data: data,
                    success: callback.bind(self, id, currentMaxRequestId),
                    error: callback.bind(self, id, currentMaxRequestId, {code: -10000, errMsg: '    '})
                })
            })
        })
    },
    getComponentStatus: function() {
        var components = $('[_itemId]');
        var statusMap = {};
        var result;
        var self = this;
        components.each(function(index,value) {
            var key = $(value).attr('_itemId');
            statusMap[key] = true;
        });
        result = {
            length: components.length,
            status: statusMap,
            callback: function() {
                if(self.commomRequestTimesManager.getCommomRequestTimes() === 0) {
                    console.log('    ')
                }
            }
        };
        return result;
    }
}

test.

<html>
<head>
    <title>title>
head>
<body>
<script type="text/javascript" src='jquery-2.2.3-unzip.js'>script>
<script type="text/javascript" src="checker.js">
script>
<input type="text" name="x" id="textX">
<input type="text" name="y" id="textY">
<script type="text/javascript">
    new Checker({
        type: 'post',
        items: [{
            ele: '#textX',
            url: '3.php',
            key: 'ss',
            cached: true,
            beforeCheck: function() {return true;},
            cb: function(resp) {
                console.log(resp)
            }
            },{
            ele: '#textY',
            url: '3.php',
            key: 'qq',
            cb: function(resp) {
                console.log(resp)
            }
            }]
    });
script>
body>
html>