Сделайте что-нибудь после двух секунд нажатия клавиши

Я просто хочу этого добиться. если пользователь ищет пример ключевого слова "stackoverflow", я просто хочу отправить вызов ajax после этого. Не каждый раз он нажимает любую клавишу. Таким образом, я могу сэкономить много вызовов ajax каждый раз, когда нажимаю клавишу.

Я пытаюсь проверить, что если пользователь не нажимал снова в течение двух секунд после нажатия любой клавиши, я отправляю вызов ajax. но я не знаю, что использовать интервал или установить тайм-аут, пожалуйста, помогите и надеюсь, вы понимаете, что я пытаюсь объяснить. Спасибо

вот мой маленький код.

$(document).ready(function(){
    var counter = 0;
    $("#input").keyup(function(){

        var myInterval = setInterval(function () {
            ++counter;
        }, 1000);

        if(myInterval > 2)
        {
            alert('ajax call going');
            clearInterval(myInterval);
        }
        else
        {
            alert('doing nothing');
        }
    })
})

person Tariq Husain    schedule 14.12.2015    source источник
comment
дублировать stackoverflow.com/questions/ 1836105 /   -  person saurabh kamble    schedule 14.12.2015
comment
не дублировать этот вопрос другой   -  person Tariq Husain    schedule 14.12.2015


Ответы (5)


var _changeInterval = null;

$("#input").keyup(function() {
    // wait untill user type in something
    // Don't let call setInterval - clear it, user is still typing
    clearInterval(_changeInterval)
    _changeInterval = setInterval(function() {
        // Typing finished, now you can Do whatever after 2 sec
        clearInterval(_changeInterval)
    }, 2000);

});

Примечание. Код взят из SO несколько месяцев назад, не помню ссылку

Изменить:

Проверьте этот jsFiddle. Проверьте комментарии в коде и выведите их в консоль для лучшего понимания.

person Harpreet Singh    schedule 14.12.2015
comment
:) Спасибо за лучший код, но я действительно не знаю, как он работает. я не могу понять поток - person Tariq Husain; 14.12.2015
comment
@TariqHusain Пожалуйста, прочтите встроенные комментарии. Если все еще непонятно, я постараюсь это объяснить. - person Harpreet Singh; 14.12.2015
comment
вы уже очистили интервал clearInterval (_changeInterval): тогда как он все еще идет в функции setInterval через две секунды - person Tariq Husain; 14.12.2015
comment
@TariqHusain. Да, я очищаюсь, но в то же время я создаю новый Интервал. - person Harpreet Singh; 14.12.2015
comment
w3schools.com/jsref/ Привет @harpreet, вы могли видеть выше пример при очистке интервала, и мы передаем переменную bt, почему переключение цвета прекращается так же, как ваш код, они создают новый интервал при очистке. и второй вопрос внутри функции setinterval, зачем нам снова очищать интервал? - person Tariq Husain; 14.12.2015
comment
@TariqHusain Мы очищаем bcoz setInterval будет повторяться через 2 секунды. В вашем случае он будет вызывать AJAX каждые 2 секунды повторно. В приведенном вами примере переключение - это непрерывный bcoz из setInerval, который повторяется через каждые 300 мс. Им не нужно очищать и снова устанавливать интервал, потому что им нужно выполнять свою операцию для каждого интервала. В нашем случае нам нужно выполнить операцию только один раз, поэтому мы очищаем ее до начала ее выполнения. - person Harpreet Singh; 14.12.2015
comment
спасибо за объяснение :) я буду практиковать интервал для лучшего понимания - person Tariq Husain; 14.12.2015
comment
@TariqHusain рад помочь. Даже я был очень удивлен этим решением, когда получил его от SO, такое простое и чистое. Даже я потратил много времени на то, чтобы понять, как это работает на самом деле. - person Harpreet Singh; 14.12.2015

надеюсь, это поможет ...

 $("#input").keyup(function(){
     var x=$("#input").val();
     setTimeout(function(){
         if(x==$("#input").val()) {
             alert('ajax call going');
         }
     }, 3000);
});
person Sameer    schedule 14.12.2015
comment
это мне не поможет. согласно вашему ответу, если я набрал Stack, он завершит вызов ajax 5 раз, но с опозданием на 3 секунды. я хочу только один раз, а не 5 раз - person Tariq Husain; 14.12.2015
comment
он не будет вызывать ajax пять раз, поскольку вы, переменная x, проверяете значение ввода, которое ... поэтому запрос ajax будет идти только тогда, когда пользователь перестанет печатать ... вот почему 3-секундная задержка - person Sameer; 14.12.2015
comment
Братский код работает хорошо, только одна проблема, по-прежнему, повторяется два раза. даже я набираю 5 слов, даже 7 звонков иду два раза. его предупреждение два раза. - person Tariq Husain; 14.12.2015
comment
ха-ха: D но будет лучше, если ты найдешь причину, по которой он идет два раза. :) - person Tariq Husain; 14.12.2015
comment
попробуйте это ... var y $ (# wwf) .keyup (function () {var x = $ (# wwf) .val (); setTimeout (function () {if (x == $ (# wwf) .val () && y == 0) {y = 1; // устанавливаем значение y так, чтобы отправлялся только один запрос ajax $ .post ('.. xx' + Math.random (), {}, function (result) {y = 0; // меняем значение y на 0}); else {y = 0;}}, 1000);}); - person Sameer; 14.12.2015
comment
Я думаю, что последний вариант лучше, в этом новом коде так много ошибок и так много беспорядка :( - person Tariq Husain; 14.12.2015
comment
просто используйте переменную, которая сообщит вам, что запрос ajax сделан, и сбросьте переменную в ответе ajax - person Sameer; 14.12.2015
comment
Я все еще отлаживаю и пытаюсь понять, почему он выдает предупреждение два раза. Если я не смогу найти, я все равно приму ваш ответ, поскольку вы сказали, что два лучше, чем 5: D - person Tariq Husain; 14.12.2015
comment
Для меня это настораживает только один раз. Возможно, вы нажали любую клавишу alt (разработчики обычно нажимают Alt + Tab для настройки приложений) - person Sanjay Kumar N S; 14.12.2015
comment
спасибо братан за отличную помощь и решение :) да, наконец, это сработало, спасибо. но до сих пор не знаю, почему последний код предупреждал два раза. - person Tariq Husain; 14.12.2015
comment
что вы имеете в виду под последним кодом ... какой из них работал: P .. сработало 2 переменных? - person Sameer; 14.12.2015
comment
с использованием двух переменных :) .. я имею в виду, почему код с одной переменной не работал, почему он иногда предупреждал два раза? - person Tariq Husain; 14.12.2015
comment
я предполагаю, ожидая 3 секунды .. запрос ключа был поставлен в очередь, и после этого оба запроса были выполнены .. поскольку значение осталось прежним - person Sameer; 14.12.2015

Попробуй это:

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<input type="text" id="input"> 
<script>
$(document).ready(function(){
    $("#input").keyup(function(){
       var str = $(this).val();
       setTimeout(function(){
            if(str == $("#input").val()) {
                alert('ajax call going');
            }
       }, 2000);
    });
});
</script>
person Sanjay Kumar N S    schedule 14.12.2015
comment
Возможно, вы пропустили первую строку: var lastTime = new Date (); - person Sanjay Kumar N S; 14.12.2015
comment
все еще не работает, не дожидаясь двух секунд. всякий раз, когда я нажимаю клавишу после нажатия, предупреждает о вызове ajax. - person Tariq Husain; 14.12.2015
comment
Мне понравилось, что если пользователь непрерывно нажимает клавишу, он не будет отправлять вызов ajax, но он вызывает, если нажатие клавиши происходит через 2 секунды после самого предыдущего нажатия клавиши. - person Sanjay Kumar N S; 14.12.2015
comment
Цитата из вашего сообщения: проверьте, не нажимал ли пользователь снова в течение двух секунд после нажатия любой клавиши - person Sanjay Kumar N S; 14.12.2015
comment
это не должно быть похоже, но он вызывает, если клавиша вверх происходит через 2 секунды от самой предыдущей клавиши, он должен автоматически отправлять вызов ajax, если пользователь не нажимал какую-либо клавишу в течение двух секунд после последней нажатой клавиши .. согласно вашему комментарию, пользователь имеет чтобы снова нажать кнопку. - person Tariq Husain; 14.12.2015
comment
Вы имеете в виду, что я должен дать этот титул? проверьте, что если пользователь не нажимал снова в течение двух секунд после нажатия любой клавиши - person Tariq Husain; 14.12.2015
comment
О .. хорошо, тогда, что вы имеете в виду, таким образом, я могу сэкономить много вызовов ajax каждый раз, когда нажимаете клавишу. - person Sanjay Kumar N S; 14.12.2015
comment
Я хочу сказать без условия, если я наберу стек (5 символов), что означает, что вызов ajax будет выполняться 5 раз. Я просто хочу отправить его один раз, если пользователь перестанет печатать более двух секунд. - person Tariq Husain; 14.12.2015
comment
:) Вызов ajax выполняется два раза, и я не могу понять, почему два раза ... попробуйте stackoverflow, это слово будет предупреждать два раза. - person Tariq Husain; 14.12.2015
comment
Вы нажимали клавишу ENTER, когда появляется предупреждение, которое также запускает событие нажатия клавиши - person Sanjay Kumar N S; 14.12.2015
comment
Нажимали ли вы какую-либо клавишу после этого? Поместите приведенный ниже код и сообщите, что вызывает предупреждение? (# Input) .keyup (function (event) {alert (event.which); // оставшийся код ......}); - person Sanjay Kumar N S; 14.12.2015
comment
Для меня это настораживает только один раз. Возможно, вы нажали любую клавишу alt (Alt + Tab для приложений Toogling) - person Sanjay Kumar N S; 14.12.2015

Если ваш пользователь печатает непрерывно, как 20 символов, тогда? setTimeout будет вызывать через некоторое время (по истечении определенных секунд). Если вам нужен наиболее правильный способ, почему бы не использовать debounce.

$(function(){

var default_text = $('#text-type').text(),
  text_counter_1 = 0,
  text_counter_2 = 0;

 // This function is not debounced, but instead bound directly to the event.
function text_1() {
  var val = $(this).val(),
  html = 'Not-debounced AJAX request executed: ' + text_counter_1++ + ' times.'
  + ( val ? ' Text: ' + val : '' );

  $('#text-type-1').html( html );
};

// This function is debounced, and the new, debounced, function is bound to
// the event. Note that in jQuery 1.4+ a reference to either the original or
// debounced function can be passed to .unbind to unbind the function.
function text_2() {
  var val = $(this).val(),
  html = 'Debounced AJAX request executed: ' + text_counter_2++ + ' times.'
  + ( val ? ' Text: ' + val : '' );

  $('#text-type-2').html( html );
};

// Bind the not-at-all debounced handler to the keyup event.
$('input.text').keyup( text_1 );

// Bind the debounced handler to the keyup event.
$('input.text').keyup( $.debounce( 250, text_2 ) ); // This is the line you want!

// Trigger the callbacks once to show some initial (zero) values.
text_1();
text_2();
});

Блог Вот живой пример < / em>
Блог 2

person Nikhil Chaudhary    schedule 14.12.2015
comment
проверьте новый принятый ответ, это рабочий префект - person Tariq Husain; 14.12.2015

Если вы хотите что-то сделать по прошествии определенного периода времени, и это время может быть сброшено после определенного события, такого как keyup, лучшее решение - это методы clearTimeout и setTimeout:

// declare the timeout variable out of the event listener or in global scope
var timeout = null;

$("#some-id-to-bind-event").keyup(function() {
    clearTimeout(timout); // this will clear the recursive unneccessary calls
    timeout = setTimeout(() => {
         // do something: send an ajax or call a function here
    }, 2000);
    // wait two seconds

});
person Samir Rahimy    schedule 04.02.2021