Событие jQuery только каждый интервал времени

Question

$(document).ready(function() {

    $('#domain').change(function() {

        //

    });

});

Код внутри функции изменения в основном отправляет ajax-запрос для запуска PHP-скрипта. #Domain является полем ввода текста. Поэтому в основном я хочу отправлять ajax-запросы в виде пользовательских текстов в текстовом поле (например, в предложениях поиска).

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

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

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

Answer 1

$(function() {
  var timer = 0;
  $("#domain").change(function() {
    clearTimeout(timer);
    timer = setTimeout(function(){
      // Do stuff here
    }, 2000);
  });
});

Answer 2

$(document).ready(function() {

    var ajaxQueue;

    $('#domain').change(function() {

        if(!ajaxQueue) {
           ajaxQueue = setTimeout(function() { 
              /* your stuff */
              ajaxQueue = null;
          }, 2000);
        }

    });

});

Answer 3

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

$(document).ready(function() {

    var lastreq = 0; //0 means there were never any requests sent
    $('#domain').change(function() {
         var d = new Date();
         var currenttime = d.getTime(); //get the time of this change event
         var interval = currenttime - lastreq; //how many milliseconds since the last request
         if(interval >= 2000){ //more than 2 seconds
            lastreq = currenttime; //set lastreq for next change event
            //perform AJAX call
         }

   });

});

Answer 4

две переменные, charBuffer, sendFlag

1. Используйте setTimeout, чтобы вызывать функцию каждые две секунды.
   • Эта функция проверяет наличие в буфере содержимого.
   • Если это так, он отправляет / очищает материал и очищает флаг отправки (в false).
     • и он также должен очистить тайм-аут и установить его снова
   • иначе он устанавливает флаг (в true).
2. Каждый раз, когда пользователь нажимает на ключ, сохраняйте его в буфере.
   • если флаг отправления сброшен (ложно), ничего не делать.
   • else (это правда) отправить / очистить содержимое, находящееся в данный момент в буфере, и сбросить флаг (в false),
     • и он также должен очистить тайм-аут и установить его снова

Это позволит сделать так, чтобы при первом нажатии клавиши она была отправлена, и перед повторной отправкой должно пройти не менее 2 секунд.

Можно использовать некоторые настройки, но я использую эту настройку, чтобы сделать что-то подобное.

Answer 5

С макушки головы, не пытаясь это сделать в браузере. Примерно так:

$('#domain').change(function() {

    if (!this.sendToServer) { // some expando property I made up
        var that = this;
        this.sendToServer = setTimeout(function(that) {
            // use "that" as a reference to your element that fired the onchange.
            // Do your AJAX call here
            that.sendToServer = undefined;
        }, yourTimeoutTimeInMillis)
    }
    else {
        clearTimeout(this.sendToServer);
    }
});

Answer 6

Я сталкиваюсь с этой проблемой все больше и больше (чем больше я делаю UJ Ajax), так что я упаковал это в плагин, доступный здесь