Функция запуска после прекращения ввода пользователем

У меня есть поле ввода, в котором пользователь может ввести длинное значение. Это значение затем используется как входное значение в сложной функции времени.

Мой вопрос: как я могу начать выполнение этой функции примерно через 1 секунду после того, как пользователь закончил свой ввод? (Я не хочу запускать его после каждого нажатия клавиши, поскольку это действительно замедляет страницу). Так что, если его следующее нажатие клавиши находится в пределе 1 с момента последнего нажатия клавиши, чем ждать дополнительной секунды.

Есть ли у вас какие-либо предложения?

дополнительное примечание: мне также нужно передать некоторые параметры в эту функцию

Ответы

Ответ 1

Вот черновик: http://jsfiddle.net/jomanlk/msmJp/

Использует setTimeout и clearTimeout

var timer = null;
    $('#text').keydown(function(){
           clearTimeout(timer); 
           timer = setTimeout(doStuff, 1000)
    });
    
    function doStuff() {
        alert('do stuff');
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id='text'>

Ответ 2

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

(function(){
    var keystoppedTimer = null;
    var keystoppedInputs = document.getElementsByTagName('input');
    for (var i = 0, l = keystoppedInputs.length; i < l; i++) {
        keystoppedInputs[i].addEventListener('keydown', function(event){
            clearTimeout(keystoppedTimer);
            keystoppedTimer = setTimeout(function() {
                event.target.dispatchEvent( new Event('keystopped') );
            }, 600);
        }, false);
    }
}());

Добавление этого (подумайте об этом как polyfill), позволяет значительно упростить использование. Все, что вам нужно сделать, чтобы настроить пользователя на то, чтобы остановить ввод, добавляет прослушиватель событий к вашему таргетингу на элементы "keystopped".

inputElement.addEventListener('keystopped', function(event){
    console.log('Stopped typing');
}, false);

Я выбрал keystopped, потому что он соответствует keydown, keyup и т.д.

Ответ 3

Используйте bindWithDelay плагин jQuery:

element.bindWithDelay(eventType, [ eventData ], handler(eventObject), timeout, throttle)

Ответ 4

Я разместил решение, когда оно покажет, что пользователь печатает, а пользователь остановил тип

function typingAction(){
  $('#typing').text("user is typing....");
clearTimeout();
setTimeout(()=>{
  $('#typing').text(' user stopped typing.....'); //**can call your function here**
  },2000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>Chat | ChatApp</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="/css/styles.css">
</head>

<body >
   
<p id="typing"></p>
<input name="message" type="text" placeholder="Message" autofocus autocomplete="off" oninput="typingAction()" />
  


</body>

</html>