отправлять нажатия клавиш с помощью ajax через 1 с?

Question

Я хочу отправить нажатия клавиш, набранные в текстовом поле, но только с интервалом в 1 с.

это позволяет уменьшить нагрузку на отправку ajax-запроса при каждом нажатии клавиши.

так, например. если пользователь наберет 4 буквы в течение секунды, запрос отправит все эти 4 буквы. и скажем, что он печатает без остановки в течение 1 минуты, затем скрипт будет отправлять с интервалом 1 с, пока он не прекратит печатать.

на данный момент мой сценарий выглядит так:

$("#type_post").live('keyup', function() {
      $.post('posts.php', {post: $("#type_post").val()});
});

но это посылает на все нажатия клавиш.

Может ли кто-нибудь помочь мне здесь

ОБНОВЛЕНИЕ: вот код, который я использовал.

var last_post = '';

$('#type_post').focus(function() {
     // check if text has been changed every second when input field is focused
     setInterval(function() {
          if($('#type_post').val() != last_post)
          {
               // if changed, post it and set the new text as last text
               $.post('posts.php', {post: $("#type_post").val()});
               last_post = $("#type_post").val();
          }
     }, 1000);
});

Answer 1

Что ж, независимо от того, насколько раздражающей будет эта функция, вы захотите использовать setTimeout() ( info здесь ), чтобы запускать функцию каждую секунду и захватывать текст. Если это не так, тогда вызовите ajax.

В дополнение к этому, вы захотите, чтобы этот параметр был включен только тогда, когда текстовое поле имеет фокус, поэтому вы можете настроить поле и соответствующие действия для событий 'focus' и 'blur'.

Answer 2

Важно помнить, что с точки зрения взаимодействия с пользователем 4 секунды - это очень долгое время ожидания, чтобы что-то произошло. Весьма нецелесообразно ожидать, что пользователь будет ждать где-то еще слишком долго для получения обратной связи.

При этом, вот частичная реализация, которую я разработал. Он не учитывает отправку каких-либо данных после того, как пользователь стирает, так что это может быть немного неловко, когда он выходит - возможно, нет. Я не проверял, но общий принцип там.

var sendInterval;
var lastValue;
$("#type_post").focus(function() {
         var input = $(this);
    sendInterval = setInterval(function() { sendData(input.val()); }, 4000);
});

$("#type_post").blur(function() {
    if(sendInterval)
        clearInterval(sendInterval);
});

function sendData(data) {
    if(lastValue !=  data) {
        lastValue = data;
        $.post('posts.php', {post: data});
    }
}

Answer 3

Это ужасная идея - отправлять запрос AJAX каждую секунду. Вместо этого вам следует рассмотреть возможность использования комбинации setTimeout и clearTimeout, чтобы отправлять запросы нажатия клавиш только после того, как пользователь прекратил печатать. Я исправлю пример в жаркую минуту.

var timer = 0;
$("#type_post").live('keyup', function(e) {
    var val = $(this).val();
    // clear any existing timer
    clearTimeout(timer);
    // set a 1 second timeout
    timer = setTimeout(function() { keyLogger(val) }, 1000);
});

function keyLogger(val) {
    $.post('posts.php', {post: $("#type_post").val()});
}

Answer 4

вы можете сохранить время последнего обновления в переменной, а затем проверить, истек ли период задержки, прежде чем приступить к публикации.

Answer 5

Я делал нечто подобное раньше, за исключением использования MooTools вместо jQuery ... Посмотрите на регистрационную форму по адресу http://obviousspoilers.com/member/register (введите имя пользователя в).

Я кодировал это, прежде чем узнавать о ненавязчивом JavaScript, поэтому он использует onkeyup = "..." onblur = "...". Код определенно может быть очищен, но вы можете использовать любой из него. JavaScript находится на http://obviousspoilers.com/res/script.js, взгляните на объект Register.

Изменить: Не правильно прочитал ваш вопрос, так что, вероятно, это не поможет: (

Answer 6

Я использую автозаполнение Ajax для jQuery, версия 1.1, которая хорошо решает эту проблему, это фрагмент кода, включенный в событие OnKeyUp:

  clearInterval(this.onChangeInterval);
  if (this.currentValue !== this.el.val()) {
    if (this.options.deferRequestBy > 0) {
      // Defer lookup in case when value changes very quickly:
      var me = this;
      this.onChangeInterval = setInterval(function() { me.onValueChange(); }, this.options.deferRequestBy);
    } else {
      this.onValueChange();
    }
  }

Я бы посоветовал вам еще раз рассмотреть его, чтобы полностью понять.