Скрипт не успевает выполняняться?

Question

[Александр]

Сори за формулировку вопроса. Пытаюсь реализовать "живой поиск". После каждого введенного символа отправляется ajax, ну и выводит результаты. Если быстро набирать, получается что то типо такого:

Код запроса

$('input[name=clientsearch]').on('input',function(e){

        var find = $(this).val();
        if(find.length == 0){
            $('.clientsearch ul').empty();
        }

        if(find.length >= 2){
            $('.clientsearch ul').empty();
            $.ajax({
                type: "GET",
                url: "/panel/search",
                data: {"find": find},
                cache: false,
                success: function(response){
                    if(response.length == 0){
                        $('.clientsearch ul').append("<li>"+"По вашему запросу ничего не найдено"+"</li>");
                        return 0;
                    }
                    $.each(response,function (index, value) {
                        $('.clientsearch ul').append("<a href=''><li>"+value.lastname+" "+value.name+" "+value.middlename+"</li></a>");
                    });
                }
            });
        }
    });

Comments

[Максим Федоров]

ну а если с таким "словом" послать запрос -- ответ есть?
может на такой запрос просто идет ответ с response.length == 0

[Александр]

Максим Федоров, да, просто пустой json

[Александр]

Максим Федоров, да, ответ идет с length 0, проблема не в этом, а в том что не успевают удаляться предыдущие li, и уже новые накатываются

Answer 1

[Антон Спирин]

Используйте lodash throttle:

$('#search').on('input', _.throttle(function(e) {
    var searchKeyword = $(this).val();
    ...
}, 1000));

Comments

[Александр]

Спасибо большое)

[Exploding]

Александр, А так в очередь не становятся?)))

[Exploding]

Антон Спирин Спасибо, вы "убили" мне ближайшие пару часов:) В смысле не слышал о lodash ранее, так что, придется почитать))

[Александр]

Exploding, Неа, магия какая то)

[Антон Спирин]

Exploding, посмотрите еще _.debounce, тоже очень крутая штука. Возможно, в данном случае, даже будет лучше использовать ее.

Александр, попробуйте еще _.debounce c меньшим таймаутом(например 300). Может, вам она даже больше подойдет. Ну, и просто знайте, что такая функция есть.

Об отличиях:
https://habrahabr.ru/post/60957/
https://webdevkin.ru/posts/frontend/kak-ispolzovat...

[Александр]

Антон Спирин, да, _.debounce получше зашел) круто) спасибо

[Exploding]

Александр, Я там ответ пересоздал:) Посмотрите. Наверно это оно.
Антон Спирин, да, полезная библиотека. Можно оттуда "почерпнуть"!)) Спасибо, еще раз:)

Answer 2

[Exploding]

Я сначала не правильно понял суть вопроса...
Вот ваше решение. Просто нужно отменять ожидание результатов для существующих запросов. Типа того как в браузере при не полной загрузке страницы, нажимаем на cancel.
И зачем нагружать клиент разбором результата, если можно отдавать полностью готовый html!
Короче вот:

$('input[name=clientsearch]').on('input',function(e){

	var query = $(this).val();
	var TXhr;
	
	if(query.length >= 2){
		
		$('.clientsearch ul').html("<li>Ищу...</li>");
		try{
			TXhr.abort();
		} 
		finally{
			 TXhr = $.ajax({
				type: "GET",
				url: "/panel/search",
				data: {"find": query},
				cache: false,
				success: function(response){
					$('.clientsearch ul').html(response);
				}
			});	
		}
	}
});