Как отключить несколько запросов на автозаполнение поиска javascript?

Question

Я использую Turbolinks.visit действие, через $(document).on("input"); ...

HTML

<form id="mainSearch" method="get" autocomplete="off">
    <input type="search" name="s" placeholder="Search" />
</form>

Javascript

$(document).off().on("input", "#mainSearch", function(e) {

        e.stopImmediatePropagation();
        e.stopPropagation();
        e.preventDefault();

        var ser     = $(this).serialize();

        setTimeout(function(){
            Turbolinks.visit(
                homeurl+"/?"+ser,
                {
                    change: ['content']
                }
            );
        },110);

        return false;
    });  

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

действуйте, как принять меры предосторожности, чтобы сохранить егонажата?.on("input"

Answer 1

Возможно, вы ищете https://stackoverflow.com/a/27787793/5523033, так как вы используете JQuery, вы можете использовать $.debounce

, и вот несколько примеров, чтобы поиграться с http://jsfiddle.net/cowboy/cTZJU/

Answer 2

Вы забыли отменить предыдущий таймер?

var timer = null;

$(document).off().on("input", "#mainSearch", function(e) {

    e.stopImmediatePropagation();
    e.stopPropagation();
    e.preventDefault();

    var ser= $(this).serialize();

    clearInterval(timer);

    timer = setTimeout(function(){
        Turbolinks.visit(
            homeurl+"/?"+ser,
            {
                change: ['content']
            }
        );
    },110);

    return false;
});  

Редактировать: Вместо того, чтобы заново изобретать колесо, всегда есть хороший выбор для использования существующих решений, $.debounce() - это то, что вы ищете.