Jquery Выполнить код через 2 секунды после последнего нажатия клавиши - PullRequest
Новая
       16

Jquery Выполнить код через 2 секунды после последнего нажатия клавиши

19 голосов
/ 06 декабря 2010

Я работаю над функцией автоматического поиска для сайта.

Он использует ajax для запроса API.

В данный момент после ввода 3 символов он будет искать при каждом нажатии клавиши.

То, что я хочу, это

Case1:
Пользователь вводит тест
Выполнен поиск в течение 2 секунд. Case2:
Пользователь вводит тест
1-секундный проход
пользователь нажимает t
2-секундный проход
поиск выполняется на тесте
Case3:
Пользователь вводит тест
1-секундные проходы
пользователь нажимает t
1,5-секундный проход
пользователь нажимает i
1,5-секундный проход
пользователь нажимает n
1,5 секунды прохода
пользователь нажимает g
2 секунды прохода
поиск выполняется при тестировании

, поэтому, как вы можете видеть, действие поиска выполняется только при наличииесли в течение двух секунд после нажатия клавиши не было нажатий (или вставок), то

моя основная идея заключается в следующем.

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

Если они совпадают, изменений не было.Так что сделайте поиск

Если они этого не сделают, то ничего не сделайте, потому что для выполнения той же проверки последует время ожидания от следующего нажатия клавиши.

Это единственный / лучший способ сделать это

Ответы [ 2 ]

43 голосов
/ 06 декабря 2010

Следующая функция из Реми Шарп сделает свое дело: 

function throttle(f, delay){
    var timer = null;
    return function(){
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = window.setTimeout(function(){
            f.apply(context, args);
        },
        delay || 500);
    };
}

В предыдущем коде f - это функция, которую вы хотели бы регулировать, а delay - это количество миллисекунд ожидания после последнего вызова (по умолчанию 500, если не указано). throttle возвращает функцию-обертку, которая очищает любые существующие тайм-ауты от предыдущих вызовов, а затем устанавливает тайм-аут на delay миллисекунд в будущем для вызова f. Ссылка на arguments возвращаемой функции используется для вызова f с гарантией того, что f получит ожидаемые аргументы.

Вы должны использовать его следующим образом: 

$('#search').keyup(throttle(function(){
    // do the search if criteria is met
}));
11 голосов
/ 06 декабря 2010

Почти то же самое, за исключением того, что таймер устанавливается только при соблюдении условий: 

<input id="search" type="text" />
<script>
    var timer, value;
    $('#search').bind('keyup', function() {
        clearTimeout(timer);
        var str = $(this).val();
        if (str.length > 2 && value != str) {
            timer = setTimeout(function() {
                value = str;
                console.log('Perform search for: ', value);
            }, 2000);
        }
    });
</script>
...