javascript – Ajax – 但仅在用户停止输入时才有效

我有一个表格列表,每行都有一个’notes’字段.我希望能够使用ajax更新这些并在更新后显示一条消息,但我很难找出正确的代码.

我的计划是捕获一个按键,然后将音符ID传递给一个计时器,每当用户按下一个键时它就会被重置,所以它只会在他们停止输入1秒后才会运行.问题是,如果页面上有多个注释,我需要将它传递给一个数组并在每个数组上重置计时器,如果可能的话？

这是我的代码：

var waitTime = 1000;
    var click = false;
    var timers = new Array();

    $('.notes').keyup(function(){

        var timerVariable = $(this).attr('id').split("-");
        timerVariable = timerVariable[0];
        timerVariable = timerVariable.replace('note','');

        timers.push(timerVariable);
        timers[timerVariable] = timerVariable;

        if(click==false){
            var id = $(this).attr('id');
            if(click==false){
                click= true;
                timerVariable = setTimeout(function(){doneTyping(id)},waitTime);
            }
        }
    });

    $('.notes').keydown(function(){
        for (var timer in timers) {
            clearTimeout(timer);
        }
        click = false;
    });

    function doneTyping (id) {
        var staffNo = id.split("-");
        staffNo = staffNo[0];
        staffNo = staffNo.replace('note','');

        var data = 'data='+id+'&note='+$('#'+id).val();
        $.ajax({
            url: "update-notes.PHP",type: "GET",data: data,cache: false,success: function (html) {
                jGrowlTheme('mono','Updated ' + staffNo,'Thank you,the note has been updated.','tick.png');
            }
        });
    }

我想知道问题是否可能与我调用for循环或其他方式有关？非常欢迎任何建议,谢谢！

解决方法

这不是你的问题的直接答案,但我个人会从你的代码中使用这样的jquery插件：

$('.note-fields').myNoteAjaxPlugin({ waitFor: '1000'  });

每个“音符字段”都有它的插件实例,封装了专用于每个字段的定时器.无需担心存储在数组等.

有很多插件模式和样板,如this one和this other one.

这是一个示例实现.我使用了一个样板并将其与jquery ui桥代码(它检查私有方法,重新使用以前的插件实例或正确实例化)合并：

;(function ( $,window,document,undefined ) {

    // Create the defaults once
    var pluginName = 'myNoteAjaxPlugin',defaults = {
            waitFor: "1000",};

    // The actual plugin constructor
    function Plugin( element,options ) {

        this.element = element;
        this.$element = $(element);

        this.options = $.extend( {},defaults,options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this._timer = null;
        this._click = false;

        this._init();
    }

    Plugin.prototype._init = function () {

        var self = this;

        this.$element.keyup(function(e){

            if( self._click === false ){
                var id = self.element.id;
                if( self._click === false ){
                    self._click = true;
                    self._timer = setTimeout(function(){self._doneTyping(id)},self.options.waitFor);
                }
            }
        });

        this.$element.keydown(function(e) {

            if (self._timer) {
                clearTimeout(self._timer);
            }
            self._click = false;

        });

    };

    Plugin.prototype._doneTyping = function(id) {

        alert('done typing');

    };

    $.fn[pluginName] = function( options ) {

        var isMethodCall = typeof options === "string",args = Array.prototype.slice.call( arguments,1 ),returnValue = this;

        // allow multiple hashes to be passed on init
        options = !isMethodCall && args.length ?
            $.extend.apply( null,[ true,options ].concat(args) ) :
            options;

        // prevent calls to internal methods
        if ( isMethodCall && options.charat( 0 ) === "_" ) {
            return returnValue;
        }

        if ( isMethodCall ) {
            this.each(function() {
                var instance = $.data( this,pluginName ),methodValue = instance && $.isFunction( instance[options] ) ?
                        instance[ options ].apply( instance,args ) :
                        instance;

                if ( methodValue !== instance && methodValue !== undefined ) {
                    returnValue = methodValue;
                    return false;
                }
            });

        } else {
            this.each(function() {
                var instance = $.data( this,pluginName );
                if ( instance ) {
                    instance.option( options || {} )._init();
                } else {
                    $.data( this,pluginName,new Plugin( this,options) );
                }
            });
        }

        return returnValue;
    };

})( jQuery,document );


$('#myinput').myNoteAjaxPlugin({waitFor: '1500'});

工作DEMO