Запустить функцию после того, как пользователь перестал печатать - PullRequest
Новая
       0

Запустить функцию после того, как пользователь перестал печатать

14 голосов
/ 10 мая 2011

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

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

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

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

Ответы [ 4 ]

24 голосов
/ 10 мая 2011

Вот черновик: 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'>
3 голосов
/ 06 октября 2016

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

(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);
    }
}());

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

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

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

2 голосов
/ 04 марта 2012

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

element.bindWithDelay(eventType, [ eventData ], handler(eventObject), timeout, throttle)
0 голосов
/ 20 апреля 2018

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

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...