JavaScript onKeyUp 超时关闭

Question

我正在尝试使用闭包将 onKeyUp 事件分配给表单中的所有输入。数组 fields 包含需要分配给它们的事件的字段的所有名称。数组 ajaxFields 包含需要 ajax 验证的字段名称(来自数组 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]));
    }
}

我希望 onKeyUp 函数在用户完成该字段的输入后一秒钟执行，而不是每次按下键时 (onKeyUp)。这将节省大量处理空间，更不用说 ajax 调用了。到目前为止，我正在使用这个:

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

您可能已经注意到函数 validate() 不存在，那是因为我不知道如何将闭包包装在命名函数中，我什至不确定我是否应该这样做。 ..

那我该怎么做呢？

编辑:这是当前的 fiddle

Answer 1

您可以(并且应该)将函数传递给 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/