Как вызвать событие во входном тексте после того, как я перестану печатать/писать?

Я хочу вызвать событие сразу после того, как я перестану вводить (не во время ввода) символы в моем входном текстовом поле.

Я пробовал с:

$('input#username').keypress(function() {
    var _this = $(this); // copy of this object for further usage

    setTimeout(function() {
        $.post('/ajax/fetch', {
            type: 'username',
            value: _this.val()
        }, function(data) {
            if(!data.success) {
                // continue working
            } else {
                // throw an error
            }
        }, 'json');
    }, 3000);
});

но этот пример создает тайм-аут для каждого введенного символа, и я получаю около 20 запросов AJAX, если я набираю 20 символов.

На этой скрипке я демонстрирую ту же проблему с простым предупреждением вместо AJAX.

есть ли решение для этого или мне просто плохо подходите для этого?

69
debouncing jquery keypress timeout typeahead

9 ответов

вам придется использовать setTimeout (как и вы), но также сохраните ссылку, чтобы вы могли сбросить ограничение. Что-то вроде:

//
// $('#element').donetyping(callback[, timeout=1000])
// Fires callback when a user has finished typing. This is determined by the time elapsed
// since the last keystroke and timeout parameter or the blur event--whichever comes first.
//   @callback: function to be called when even triggers
//   @timeout:  (default=1000) timeout, in ms, to to wait before triggering event if not
//              caused by blur.
// Requires jQuery 1.7+
//
;(function($){
    $.fn.extend({
        donetyping: function(callback,timeout){
            timeout = timeout || 1e3; // 1 second default timeout
            var timeoutReference,
                doneTyping = function(el){
                    if (!timeoutReference) return;
                    timeoutReference = null;
                    callback.call(el);
                };
            return this.each(function(i,el){
                var $el = $(el);
                // Chrome Fix (Use keyup over keypress to detect backspace)
                // thank you @palerdot
                $el.is(':input') && $el.on('keyup keypress paste',function(e){
                    // This catches the backspace button in chrome, but also prevents
                    // the event from triggering too preemptively. Without this line,
                    // using tab/shift+tab will make the focused element fire the callback.
                    if (e.type=='keyup' && e.keyCode!=8) return;
                    
                    // Check if timeout has been set. If it has, "reset" the clock and
                    // start over again.
                    if (timeoutReference) clearTimeout(timeoutReference);
                    timeoutReference = setTimeout(function(){
                        // if we made it here, our timeout has elapsed. Fire the
                        // callback
                        doneTyping(el);
                    }, timeout);
                }).on('blur',function(){
                    // If we can, fire the event since we're leaving the field
                    doneTyping(el);
                });
            });
        }
    });
})(jQuery);

$('#example').donetyping(function(){
  $('#example-output').text('Event last fired @ ' + (new Date().toUTCString()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" id="example" />
<p id="example-output">Nothing yet</p>

это будет выполняться, когда:

  1. тайм-аут истек, или
  2. пользователь переключил поля (blur событие)

(в зависимости от того, что наступит раньше)

151

устранение:

вот решение. Выполнение функции после того, как пользователь перестал печатать в течение заданного времени:

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
  clearTimeout (timer);
  timer = setTimeout(callback, ms);
 };
})();

использование

$('input').keyup(function() {
  delay(function(){
    alert('Hi, func called');
  }, 1000 );
});
56

вы можете использовать символ подчеркивания.js "debounce"

$('input#username').keypress( _.debounce( function(){<your ajax call here>}, 500 ) );

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

для дополнительной информации, с помощью._ debounce (func,таймер,правда) будет означать, что первая функция будет выполняться и все остальные события нажатия клавиш с последующими таймерами 500ms будут проигнорированы.

15

вам нужно debounce!

здесь плагин jQuery, и вот все, что вам нужно знать о debounce. Если вы пришли сюда из Google и подчеркивание нашло свой путь в JSoup вашего приложения, он имеет debounce выбор!

9

очистить решение :

$.fn.donetyping = function(callback, delay){
  delay || (delay = 1000);
  var timeoutReference;
  var doneTyping = function(elt){
    if (!timeoutReference) return;
    timeoutReference = null;
    callback(elt);
  };

  this.each(function(){
    var self = $(this);
    self.on('keyup',function(){
      if(timeoutReference) clearTimeout(timeoutReference);
      timeoutReference = setTimeout(function(){
        doneTyping(self);
      }, delay);
    }).on('blur',function(){
      doneTyping(self);
    });
  });

  return this;
};
4

есть некоторые простые плагин Я сделал, что делает именно это. Он требует гораздо меньше кода, чем предлагаемые решения, и это очень легкий (~0,6 КБ)

сначала вы создаете

3

Я искал простой HTML / JS-код, и я его не нашел. Затем, я написал код ниже, используя onkeyup="DelayedSubmission()".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head><title>Submit after typing finished</title>
<script language="javascript" type="text/javascript">
function DelayedSubmission() {
    var date = new Date();
    initial_time = date.getTime();
    if (typeof setInverval_Variable == 'undefined') {
            setInverval_Variable = setInterval(DelayedSubmission_Check, 50);
    } 
}
function DelayedSubmission_Check() {
    var date = new Date();
    check_time = date.getTime();
    var limit_ms=check_time-initial_time;
    if (limit_ms > 800) { //Change value in milliseconds
        alert("insert your function"); //Insert your function
        clearInterval(setInverval_Variable);
        delete setInverval_Variable;
    }
}

</script>
</head>
<body>

<input type="search" onkeyup="DelayedSubmission()" id="field_id" style="WIDTH: 100px; HEIGHT: 25px;" />

</body>
</html>
1

почему так много, когда вы просто хотите сбросить часы ?

var clockResetIndex = 0 ;
// this is the input we are tracking
var tarGetInput = $('input#username');

tarGetInput.on( 'keyup keypress paste' , ()=>{
    // reset any privious clock:
    if (clockResetIndex !== 0) clearTimeout(clockResetIndex);

    // set a new clock ( timeout )
    clockResetIndex = setTimeout(() => {
        // your code goes here :
        console.log( new Date() , tarGetInput.val())
    }, 1000);
});

Если вы работаете на WordPress , то вам нужно обернуть весь код внутри блок на jQuery :

jQuery(document).ready(($) => {
    /**
     * @name 'navSearch' 
     * @version 1.0
     * Created on: 2018-08-28 17:59:31
     * GMT+0530 (India Standard Time)
     * @author : ...
     * @description ....
     */
        var clockResetIndex = 0 ;
        // this is the input we are tracking
        var tarGetInput = $('input#username');

        tarGetInput.on( 'keyup keypress paste' , ()=>{
            // reset any privious clock:
            if (clockResetIndex !== 0) clearTimeout(clockResetIndex);

            // set a new clock ( timeout )
            clockResetIndex = setTimeout(() => {
                // your code goes here :
                console.log( new Date() , tarGetInput.val())
            }, 1000);
        });
});
0

по моему мнению, пользователь перестает писать, когда он не фокусируется на этом входе. Для этого у вас есть функция под названием "размытие", которая делает вещи как

-2