Запустити функцію javascript, коли користувач закінчує вводити текст, а не натискати клавішу?

Я хочу запустити запит ajax, коли користувач закінчив вводити текстове поле. Я не хочу, щоб вона виконувала цю функцію щоразу, коли користувач вводить лист, оскільки це призведе до багато запитів ajax, однак я також не хочу, щоб вони мали натиснути кнопку введення.

Чи є спосіб, щоб я міг визначити, коли користувач закінчив друкувати, а потім зробити запит ajax?

Використовуючи jQuery тут! Дейв

Отже, я думаю, що закінчити введення означає, що ти просто зупинишся на деякий час, скажімо, 5 секунд. Отже, маючи на увазі, давайте запустити таймер, коли користувач випустить ключ, і очистити його, коли він натисне його. Я вирішив, що питання, про яке йде мова, буде #myInput.

Роблячи кілька припущень ...

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

Обрана відповідь вище не працює.

Оскільки типізація таймера випадково встановлюється кілька разів (клавіша натискається двічі до запуску клавіш для швидких машинок тощо), вона не очищається належним чином.

Наведене нижче рішення вирішує цю проблему і зателефонує через X секунд після закінчення запиту ОП. Він також більше не вимагає надмірної функції клавіш. Я також додав чек, щоб ваш виклик функції не відбувся, якщо ваш вхід порожній.

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on keyup, start the countdown
$('#myInput').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#myInput').val()) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

І той самий код у ванільному JavaScript-рішенні:

//setup before functions
let typingTimer;                //timer identifier
let doneTypingInterval = 5000;  //time in ms (5 seconds)
let myInput = document.getElementById('myInput');

//on keyup, start the countdown
myInput.addEventListener('keyup', () => {
    clearTimeout(typingTimer);
    if (myInput.value) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

Це рішення використовує ES6, але це не потрібно. Просто замініть letз varі функцією стрілка з регулярною функцією.

Це лише один рядок з функцією дебютування underscore.js :

$('#my-input-box').keyup(_.debounce(doSomething , 500));

Це в основному говорить про щось 500 мілісекунд після того, як я припиняю набирати текст.

Для отримання додаткової інформації: http://underscorejs.org/#debounce

Так, ви можете встановити тайм-аут, скажімо, 2 секунди для кожної події клювання, яка викликатиме запит на ajax. Ви також можете зберігати метод XHR і переривати його на наступних ключових подіях преси, щоб ви економили пропускну здатність ще більше. Ось щось я написав для свого автозавершеного сценарію.

var timer;
var x;

$(".some-input").keyup(function () {
    if (x) { x.abort() } // If there is an existing XHR, abort it.
    clearTimeout(timer); // Clear the timer so we don't end up with dupes.
    timer = setTimeout(function() { // assign timer a new timeout 
        x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel)
    }, 2000); // 2000ms delay, tweak for faster/slower
});

Сподіваюся, це допомагає,

Марко

var timer;
var timeout = 1000;

$('#in').keyup(function(){
    clearTimeout(timer);
    if ($('#in').val) {
        timer = setTimeout(function(){
            //do stuff here e.g ajax call etc....
             var v = $("#in").val();
             $("#out").html(v);
        }, timeout);
    }
});

повний приклад тут: http://jsfiddle.net/ZYXp4/8/

Обидва топ-2 відповіді для мене не працюють. Отже, ось моє рішення:

var timeout = null;

$('#myInput').keyup(function() {
    clearTimeout(timeout);

    timeout = setTimeout(function() {
        //do stuff here
    }, 500);
});

Мені подобається відповідь Surreal Dream, але я виявив, що моя функція "doneTyping" буде спрацьовувати для кожного натискання клавіш, тобто якщо ви швидко наберете "Hello"; замість того, щоб стріляти лише один раз, коли ви припините набирати текст, функція запуститься 5 разів.

Проблема полягала в тому, що функція java setTimeout не перезаписує та не знищує встановлені старі очікування, але якщо ви це зробите самі, вона працює! Тому я тільки що додав виклик clearTimeout безпосередньо перед setTimeout, якщо встановлено typingTimer. Дивись нижче:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#myInput').on("keyup", function(){
    if (typingTimer) clearTimeout(typingTimer);                 // Clear if already set     
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#myInput').on("keydown", function(){
    clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

NB: Мені б хотілося, щоб я щойно додав це як коментар до відповіді Surreal Dream, але я новий користувач і не маю достатньої репутації. Вибачте!

Змінення прийнятої відповіді для обробки додаткових випадків, таких як паста:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 2000;  //time in ms, 2 second for example
var $input = $('#myInput');

// updated events 
$input.on('input propertychange paste', function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);      
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

Я не думаю, що в цьому випадку подія keyDown не потрібна (скажіть, будь ласка, чому я помиляюся). У моєму сценарії (не-jquery) подібне рішення виглядає так:

var _timer, _timeOut = 2000; 



function _onKeyUp(e) {
    clearTimeout(_timer);
    if (e.keyCode == 13) {      // close on ENTER key
        _onCloseClick();
    } else {                    // send xhr requests
        _timer = window.setTimeout(function() {
            _onInputChange();
        }, _timeOut)
    }

}

Це моя перша відповідь на Stack Overflow, тож сподіваюся, що колись це допоможе :)

Визначте таку delayфункцію:

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

а потім скористайтеся ним:

let $filter = $('#item-filter');
$filter.on('keydown', function () {
    delay(function () {            
        console.log('this will hit, once user has not typed for 1 second');            
    }, 1000);
});    

Пізня відповідь, але я додаю це, тому що це 2019 рік, і це цілком досяжно, використовуючи досить ES6, немає сторонніх бібліотек, і я вважаю, що більшість високо оцінених відповідей є об'ємними та обтяженими занадто великою кількістю змінних.

Елегантне рішення, взяте з цієї чудової публікації в блозі.

function debounce(callback, wait) {
  let timeout;
  return (...args) => {
      const context = this;
      clearTimeout(timeout);
      timeout = setTimeout(() => callback.apply(context, args), wait);
  };
}

window.addEventListener('keyup', debounce( () => {
    // code you would like to run 1000ms after the keyup event has stopped firing
    // further keyup events reset the timer, as expected
}, 1000))

Ну, строго кажучи, ні, оскільки комп'ютер не може здогадатися, коли користувач закінчив вводити текст. Звичайно, ви можете запустити таймер на натисканні клавіш і скинути його на кожну наступну клавішу вгору. Якщо термін дії закінчиться, користувач не вводив його протягом тривалості - ви можете назвати це "закінченим введенням тексту".

Якщо ви очікуєте, що користувачі роблять паузи під час набору тексту, немає можливості дізнатися, коли вони будуть виконані.

(Якщо, звичайно, ви не можете сказати з даних, коли вони будуть виконані)

Я вважаю, що рішення дещо простіше з inputподією:

var typingTimer;
var doneTypingInterval = 500;

$("#myInput").on("input", function () {
    window.clearTimeout(typingTimer);
    typingTimer = window.setTimeout(doneTyping, doneTypingInterval);
});

function doneTyping () {
    // code here
}

згоден з відповіддю @going Ще одне подібне рішення, яке працювало для мене, - це нижче. Єдина відмінність полягає в тому, що я використовую .on ("введення" ...) замість клавіатури. Це лише фіксує зміни вхідних даних. інші клавіші, такі як Ctrl, Shift тощо, ігноруються

var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on input change, start the countdown

$('#myInput').on("input", function() {    
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function(){
        // doSomething...
    }, doneTypingInterval);
});

Я щойно придумав простий код, щоб зачекати, коли користувач закінчить вводити текст:

крок 1.задайте час нуля, а потім очистіть поточний час очікування, коли користувач набирає текст.

крок 2. триггер очищення таймауту до визначення змінної до початку події клавіатури.

крок 3.визначити час очікування змінної, оголошеної вище;

<input type="text" id="input" placeholder="please type" style="padding-left:20px;"/>
<div class="data"></div>

код JavaScript

var textInput = document.getElementById('input');
var textdata = document.querySelector('.data');
// Init a timeout variable to be used below
var timefired = null;

// Listen for keystroke events
// Init a timeout variable to be used below
var timefired = null;// Listen for keystroke events
textInput.onkeyup = function (event) {
clearTimeout(timefired);
timefired = setTimeout(function () {
    textdata.innerHTML = 'Input Value:'+ textInput.value;
  }, 600);
};

Я впроваджував пошук у своєму списку, і мені потрібно було, щоб він був заснований на Ajax. Це означає, що при кожній зміні клавіш результати пошуку повинні оновлюватися та відображатися. Це призводить до того, що на сервер відправляється стільки дзвінків Ajax, що не дуже добре.

Після деякої роботи я зробив підхід до пінг-сервера, коли користувач перестає вводити текст.

Це рішення працювало для мене:

$(document).ready(function() {
    $('#yourtextfield').keyup(function() {
        s = $('#yourtextfield').val();
        setTimeout(function() { 
            if($('#yourtextfield').val() == s){ // Check the value searched is the latest one or not. This will help in making the ajax call work when client stops writing.
                $.ajax({
                    type: "POST",
                    url: "yoururl",
                    data: 'search=' + s,
                    cache: false,
                    beforeSend: function() {
                       // loading image
                    },
                    success: function(data) {
                        // Your response will come here
                    }
                })
            }
        }, 1000); // 1 sec delay to check.
    }); // End of  keyup function
}); // End of document.ready

Ви помітите, що не потрібно використовувати жоден таймер під час реалізації цього.

Це простий код JS, який я написав:

<!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>

Ви можете використовувати подію onblur, щоб визначити, коли текстове поле втрачає фокус: https://developer.mozilla.org/uk/DOM/element.onblur

Це не те саме, що "перестає друкувати", якщо ви дбаєте про випадок, коли користувач набирає купу матеріалів, а потім сидить там із зосередженим текстовим полем.

Для цього я б запропонував прив’язати setTimeout до події onclick та припустити, що через x кількість часу без натискань клавіш, користувач перестав вводити текст.

Чому б не просто використовувати onfocusout?

https://www.w3schools.com/jsreF/event_onfocusout.asp

Якщо це форма, вони завжди залишатимуть фокус у кожному полі введення для того, щоб натиснути кнопку подання, щоб ви не знали, що жоден вклад не пропустить отримання виклику обробника події onfocusout.

Якщо користувач має потребу відійти від поля, ми можемо використовувати "onBlur" замість Onchange у Javascript

  <TextField id="outlined-basic"  variant="outlined" defaultValue={CardValue} onBlur={cardTitleFn} />

Якщо це не потрібно, налаштування таймера було б хорошим варіантом.

Як тільки ви виявите фокус на текстовому полі, під час клавіші виконайте перевірку таймауту та скидайте її кожного разу, коли вона спрацьовує.

Коли тайм-аут завершиться, зробіть свій запит на ajax.

Якщо ви шукаєте конкретну довжину (наприклад, поштовий індекс):

$("input").live("keyup", function( event ){
if(this.value.length == this.getAttribute('maxlength')) {
        //make ajax request here after.
    }
  });

Не впевнений, чи мої потреби просто дивні, але мені було потрібно щось подібне до цього, і ось що я закінчила:

$('input.update').bind('sync', function() {
    clearTimeout($(this).data('timer'));            
    $.post($(this).attr('data-url'), {value: $(this).val()}, function(x) {
        if(x.success != true) {
            triggerError(x.message);    
        }
    }, 'json');
}).keyup(function() {
    clearTimeout($(this).data('timer'));
    var val = $.trim($(this).val());
    if(val) {
        var $this = $(this);
        var timer = setTimeout(function() {
            $this.trigger('sync');
        }, 2000);
        $(this).data('timer', timer);
    }
}).blur(function() {
    clearTimeout($(this).data('timer'));     
    $(this).trigger('sync');
});

Що дозволяє мені мати такі елементи у своїй програмі:

<input type="text" data-url="/controller/action/" class="update">

Які оновлюються, коли користувач "набрав текст" (без дії протягом 2 секунд) або переходить до іншого поля (розмивається з елемента)

Якщо вам потрібно зачекати, поки користувач закінчить набрати текст, скористайтеся цим простим:

$(document).on('change','#PageSize', function () {
    //Do something after new value in #PageSize       
});

Повний приклад з викликом ajax - це працює для мого пейджера - кількість елементів у списку:

$(document).ready(function () {
    $(document).on('change','#PageSize', function (e) {
        e.preventDefault();
        var page = 1;
        var pagesize = $("#PageSize").val();
        var q = $("#q").val();
        $.ajax({
            url: '@Url.Action("IndexAjax", "Materials", new { Area = "TenantManage" })',
            data: { q: q, pagesize: pagesize, page: page },
            type: 'post',
            datatype: "json",
            success: function (data) {
                $('#tablecontainer').html(data);
               // toastr.success('Pager has been changed', "Success!");
            },
            error: function (jqXHR, exception) {
                ShowErrorMessage(jqXHR, exception);
            }
        });  
    });
});    

Кілька таймерів на сторінку

Усі інші відповіді працюють лише для одного контролю ( включена моя інша відповідь ). Якщо у вас є кілька елементів керування на кожній сторінці (наприклад, у кошику для покупок), викличеться лише останній елемент управління, де користувач щось набрав . У моєму випадку це, звичайно, не бажана поведінка - кожен елемент управління повинен мати свій таймер.

Щоб вирішити це, вам просто потрібно передати ідентифікатор функції та підтримувати словник timeoutHandles, як у наступному коді:

Декларація функції:

var delayUserInput = (function () {
    var timeoutHandles = {};    
    return function (id, callback, ms) {        
        if (timeoutHandles[id]) {
            clearTimeout(timeoutHandles[id]);
        }

        timeoutHandles[id] = setTimeout(callback, ms);             
    };
})();

Використання функції:

  delayUserInput('yourID', function () {
     //do some stuff
  }, 1000);

Простий і зрозумілий.

var mySearchTimeout;
$('#ctl00_mainContent_CaseSearch').keyup(function () {
   clearTimeout(mySearchTimeout);
   var filter = $(this).val();
   mySearchTimeout = setTimeout(function () { myAjaxCall(filter); }, 700);
   return true;
});

Для передачі параметрів до вашої функції разом із синтаксисом ES6.

$(document).ready(() => {
    let timer = null;
     $('.classSelector').keydown(() => {
     clearTimeout(timer); 
     timer = setTimeout(() => foo('params'), 500);
  });
});

const foo = (params) => {
  console.log(`In foo ${params}`);
}

Нічого собі, навіть 3 коментарі досить правильні!

1. Порожній ввід не є причиною пропуску виклику функції, наприклад, я видаляю параметр відходів з URL перед перенаправленням

2. .on ('input', function() { ... });слід використовувати для запуску keyup, pasteі changeподії

3. однозначно .val()або .valueповинні бути використані

4. Ви можете використовувати $(this)функцію внутрішньої події замість #idроботи з декількома входами

5. (моє рішення) Я використовую анонімну функцію замість doneTypingin, setTimeoutщоб легко отримати доступ $(this)з n.4, але вам потрібно спочатку зберегти їїvar $currentInput = $(this);

EDIT Я бачу, що деякі люди не розуміють вказівок без можливості скопіювати і вставити готовий код. Ось ти

var typingTimer;
//                  2
$("#myinput").on('input', function () {
    //             4     3
    var input = $(this).val();
    clearTimeout(typingTimer);
    //                           5
    typingTimer = setTimeout(function() {
        // do something with input
        alert(input);
    }, 5000);      
});