Как оптимизировать ajax запрос при input on keyup jquery?

Question

[siroper]

Здравствуйте. Имеется самая обыкновенная форма поиска ajax.
Скрипт выглядит так:

$(document).on('keyup', '.input.search', function() {
	if (($(this).val() != '') && ($(this).val().length >= 3)) {
		$.ajax({
			...

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

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

Т.е. если человек хочет быстренько написать в поисковое поле запрос "Выключатель" то это уже 9 ajax запросов.
Как-бы сделать чтобы интервал был хотя-бы секунду между ввода символов. Т.е. если человек написал в поле "Вык" и прошла одна секунда после ввода последнего символа - то только тогда шел запрос на ajax.

Тогда получится если человек достаточно быстро напишет в поле слово целиком "Выключатель" то это будет всего один запрос, а не 9.

Comments

[Андрей]

Такие вещи, по классике жанра, принято дебаунсить.

Answer 1

[siroper]

Решил сам, точнее все-же нашел решение :)

function delay(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}


// Example usage:

$('#input').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 500));

Answer 2

[lUser L]

demo

code

$(document).on('keyup', '.input', function(){
	var $this = $(this);
	var $delay = 450;
        var search_data = $this.val();

	clearTimeout($this.data('timer'));

	$this.data('timer', setTimeout(function(){

		if(search_data.length > 1) {
			$.ajax({
				type: 'POST',
				url: '/core/action/path.php',
				data: {
                      //data
				},
				success: (data) => {
                  //result
				}
			});		

		}		
	}, $delay));


});

меняй переменную delay что бы увеличивать/уменьшать задержку