jQuery. AJAX request to server with delay.

Добавление обработчика события на текстовое поле, которое вызывается с паузой.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<table>
<tr>
    <td>Search</td><td><input type="text" autocomplete="off" name="q" id="q" value="" /></td>
</tr>
</table>
<textarea readonly></textarea>

CSS

* {
 font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
 font-size: 11px;
 margin: 5px;
}
*:focus { outline: none; }

td {
 padding: 2px;
 font-size: 8pt;
}

textarea {
 padding: 3px;
 width: 350px;
 height: 200px;
 border: 2px dashed #666;
 color: #888;
 font-size: 10px;
 overflow-y: scroll;
}

JavaScript

$(function() {
    $('#q').on('keyup', function(event) {
        /* Инициализируем переменные в локальной области видимости
          для использования в анонимных функциях. */
        var $logBox = $('textarea'),
            self = this,
            url = 'path/to/script.php',
            minLength = 3,
            delay = 1000;
        /* Отменяем отложенный запуск функции
          (если доступна ссылка на timeout). */
        if (arguments.callee.timeoutID !== undefined) {
            window.clearTimeout(arguments.callee.timeoutID);
        }
        /* Откладываем на время delay запуск функции
          и сохраняем ссылку на timeout в переменной. */
        arguments.callee.timeoutID = window.setTimeout(function() {
          /* Выполняем запрос и вывод/очистку результатов. */
          /* Если значение поля больше или равно минимальной длинне,
            то выполняем запрос... */
          if (self.value.length >= minLength) {
            /*
              $.ajax({
                type: 'post',
                dataType: 'json',
                data:{query:self.value},
                cache:false,
                success:function(data){
                  // Здесь обрабатываем ответ от сервера.
                }
              });
              */
            $logBox
              .append(self.value + '\n')
              .scrollTop($logBox[0].scrollHeight);
          } else {
            $logBox.html('');
          }
        }, delay);
    });
});