JavaScript onKeyUp закрывается с таймаутом

Question

Im пытается назначить событие onKeyUp всем входам в форме, используя закрытие. массив fields содержит все имена полей, для которых требуется назначенное им событие. Массив ajaxFields содержит имена полей (из массива fields), который требует проверки ajax.

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 быть казнен вторым после того, как пользователь закончит печатать в этой области, InstEd в каждый раз, когда клавиша вверх (OnKeyUp). это сэкономит много места для обработки, не говоря уже о вызовах ajax. До сих пор им с помощью этого:

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

Вы могли заметить, что функция validate() не существует, и то, потому что я не знаю, как обернуть замыкания внутри именованной функции, и им даже не уверен, что я должен ...

Так как я могу это сделать?

EDIT: вот ток 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/

Answer 2

Это то, что ваш код должен выглядеть следующим образом:

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/