Ajax вызывает изменение текста, но не каждое изменение

Question

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

Каков наилучший способ достичь этого? Должен ли я использовать какой-то таймер здесь, чтобы определить, закончил ли пользователь писать?

В настоящее время я просто использую следующее:

notesTextarea.on('change', function(e) {
   $.ajax({ ... });
});

Answer 1

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

$("#notesTextarea").on('blur', function(e) {
     // $.ajax({ ... });
     console.log("has finished, content to be saved:" + $(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
Notes: <textarea id="notesTextarea"></textarea>
</p>
<p>
Other something: <input type="text">
</p>

Answer 2

В одну сторону вы можете позвонить, нажав клавишу ввода на keydown событие:

notesTextarea.on('keydown', function(e) {
  if(e.keyCode == 13){
    $.ajax({ ... });
  }
});

Вы также можете думать о blur, что произойдет, когда элемент потеряет фокус

notesTextarea.on('blur', function(e) {
  $.ajax({ ... }); 
});

Answer 3

Хотя другие предложенные решения (на blur или на keydown, если это клавиша ввода), сработают, я думаю, что они не то, что вы ищете.

Что еслипользователь не щелкает за пределами текстовой области и не использует ввод? Вместо этого я бы использовал технику, называемую debounce. Вы можете прочитать об этом, например, здесь: https://davidwalsh.name/javascript-debounce-function или посмотреть пример здесь: https://www.geeksforgeeks.org/debouncing-in-javascript/

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

Добавьте функцию debounce в свой код, используя пакет NPM (например, https://www.npmjs.com/package/debounce) или непосредственно добавив необходимый код:

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Источник: https://davidwalsh.name/javascript-debounce-function, который взят из Underscore.js

Затем создайте функцию, выполняющую ваши вызовы ajax, например:

var makeAjaxCall = function(e) {
    $.ajax({ ... });
};

Теперь вы можете просто добавитьслушатель вроде:

var minTimeoutBetweenCallsInMilliSeconds = 500;
notesTextarea.on('change', debounce(makeAjaxCall, minTimeoutBetweenCallsInMilliSeconds));

Теперь функция makeAjaxCall будет вызываться только через 500 мс после того, как произошло последнее событие изменения, иначе пользователь перестал печатать.

Answer 4

Аналогично ответу @ Мамуна.

Вызов Ajax на keypress событие:

$("textarea").on('keypress', function() {
    //$.ajax({ ... });
    console.log('request sent!');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
<textarea id="textarea"></textarea>
</p>

Answer 5

Если вы хотите автоматизировать это сохранение, вы можете вызвать ajax после того, как число символов, набираемых пользователем каждый раз, будет N.

В противном случае вы можете вызвать функцию ajax при комбинации клавиш CTRL + S

document.addEventListener('keydown', function(event) {

if (event.ctrlKey && event.key == 's') {
event.preventDefault();  //prevent default file save box open by browser
  alert('ajax call goes here!');


}

});