Я хочу инициировать событие сразу после того, как перестану вводить (а не во время набора) символы в текстовом поле ввода.
Я пробовал:
$('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.
Есть ли решение для этого или я просто использую для этого плохой подход?
Ответы:
Вам нужно будет использовать
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>
Это будет выполнено, когда:
blur
событие)(Что наступит раньше)
источник
keyup
работает. Вы можете проверить это и соответствующим образом изменить код.paste
-$el.is(':input') && $el.on('keyup keypress paste',function(e){
РЕШЕНИЕ:
Вот решение. Выполнение функции после того, как пользователь перестал печатать в течение определенного времени:
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 ); });
источник
Вы можете использовать underscore.js «debounce»
$('input#username').keypress( _.debounce( function(){<your ajax call here>}, 500 ) );
Это означает, что ваш вызов функции будет выполнен через 500 мс после нажатия клавиши. Но если вы нажмете другую клавишу (запускается другое событие нажатия клавиши) до 500 мс, предыдущее выполнение функции будет проигнорировано (заблокировано), а новое будет выполнено после нового таймера 500 мс.
Для дополнительной информации использование _.debounce (func, timer, true ) будет означать, что первая функция будет выполняться, а все другие события нажатия клавиш с последующими таймерами 500 мс будут проигнорированы.
источник
Вам нужен дребезг!
Вот плагин jQuery , и вот все, что вам нужно знать о debounce . Если вы едете сюда из Google и подчерка нашел свой путь в JSoup вашего приложения, он имеет дребезг выпекаться !
источник
очищенный раствор:
$.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; };
источник
Вы должны присвоить
setTimeout
переменной и использовать ееclearTimeout
для очистки при нажатии клавиши.var timer = ''; $('input#username').keypress(function() { clearTimeout(timer); timer = setTimeout(function() { //Your code here }, 3000); //Waits for 3 seconds after last keypress to execute the above lines of code });
Скрипка
Надеюсь это поможет.
источник
Я сделал простой плагин , который делает именно это. Требуется гораздо меньше кода, чем предлагаемые решения, и он очень легкий (~ 0,6 КБ)
Сначала вы создаете
Bid
объект, чем может быть вbumped
любое время. Каждый удар будет задерживать выполнение обратного вызова Bid на следующий заданный промежуток времени.var searchBid = new Bid(function(inputValue){ //your action when user will stop writing for 200ms. yourSpecialAction(inputValue); }, 200); //we set delay time of every bump to 200ms
Когда
Bid
объект готов, нам это нужноbump
как-то. Прикрепим неровности кkeyup
event
.$("input").keyup(function(){ searchBid.bump( $(this).val() ); //parameters passed to bump will be accessable in Bid callback });
Здесь происходит следующее:
Каждый раз, когда пользователь нажимает клавишу, ставка «задерживается» (повышается) на следующие 200 мс. Если пройдет 200 мсек без повторного «толчка», обратный вызов будет запущен.
Кроме того, у вас есть 2 дополнительные функции для остановки ставки (например, если пользователь нажал esc или щелкнул вне ввода) и для немедленного завершения и запуска обратного вызова (например, когда пользователь нажимает клавишу ввода):
searchBid.stop(); searchBid.finish(valueToPass);
источник
Я искал простой код 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>
источник
зачем так много делать, если вы просто хотите сбросить часы?
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); }); });
источник
Используйте атрибут onkeyup = "myFunction ()" в
<input>
вашем html.источник
На мой взгляд, пользователь перестает писать, когда не сосредотачивается на вводе. Для этого у вас есть функция под названием «размытие», которая делает такие вещи, как
источник