3

クロージャーを使用して、フォーム内のすべての入力にonKeyUpイベントを割り当てようとしています。配列fieldsには、イベントの割り当てが必要なフィールドのすべての名前が含まれています。配列には、 ajax検証を必要とするajaxFields（配列からの）フィールドの名前が含まれています。fields

function createEvents(fields,ajaxFields) {
    for(var x=0;x<fields.length;x++) {

        $('input[name='+fields[x]+']').keyup(function(field) { 
        //assign an onKeyUp event
            return function() {
                //some code using variable 'field' and array 'ajaxFields'
        }(fields[x]));
    }
}

ユーザーがそのフィールドへの入力を終了してから1秒後にonKeyUp関数を実行し、キーがアップするたびに（onKeyUp）実行するようにしたいと思います。これにより、ajax呼び出しは言うまでもなく、多くの処理スペースを節約できます。これまでのところ、これを使用しています：

clearTimeout(timer);
timer = setTimeout('validate()' ,1000);

関数が存在しないことに気付いたかもしれvalidate()ませんが、それは、名前付き関数内でクロージャをラップする方法がわからないためです。

では、どうすればよいですか？

編集：ここに現在のフィドルがあります

4

2 に答える 2

2

文字列の代わりに関数を渡すことができます (そして渡す必要があります)。setTimeout

clearTimeout(timer);
timer = setTimeout(function(){
    // your code here
}, 1000);

したがって、あなたのkeyupで、次のようなことを試してください。

$('input[name='+fields[x]+']').keyup(function(field) { 
//assign an onKeyUp event
    return function() {
        var that = this,
            $this = $(this);
        clearTimeout($this.data('timeout'));
        $this.data('timeout', setTimeout(function(){
            //some code using variable 'field' and array 'ajaxFields'
            // "this" will not be your element in here, make sure to use "that" (or "$this")
        }, 1000));
    };
}(fields[x]));

$this.dataグローバル変数を使用する代わりに、各要素に独自のタイムアウトを設定できるように、タイムアウトを に保存します。

更新されたデモ: http://jsfiddle.net/Z43Bq/3/

于 2012-05-14T18:45:24.740 に答える
1

コードは次のようになります。

var timer;

$(document).ready(function() {
    var fields = $('.field');
    var ajaxFields = $('.ajax-field');

    createEvents(fields, ajaxFields);
});

function createEvents(fields,ajaxFields) {
    // Use jQuery's "foreach" method
    $(fields).each(function(inx, field) {
        // Bind the listener here
        $(field).keyup(function(ev) {
            // Clear timeout if necessary
            if (timer != null) clearTimeout(timer);

            // Set the timeout
            timer = setTimeout(function() {
                // Your code should here

                console.log('Fields: ', fields, '\nAjax Fields: ', ajaxFields, '\nTHE field: ', field);
            }, 1000);
        });
    });
}

作業コードのフィドルもチェックしてください: http://jsfiddle.net/BLyhE/

于 2012-05-14T18:47:52.167 に答える