JavaScript — лучший подход для автоматического сохранения при смене
Я хочу удалить кнопку «Сохранить» и автоматически сохранить изменения в реальном времени.
Я знаю, что это можно сделать с помощью функции OnChange.
Учитывая, что этим веб-приложением будет пользоваться довольно много людей, количество запросов к серверу, скорее всего, достигнет ошеломляющего уровня за очень короткий период времени.
Каков наилучший подход к автоматическому сохранению без чрезмерной загрузки / отправки большого количества запросов на сервер?
Существует два типа редактируемых полей:
1- Простые поля, которые будут иметь небольшое количество букв / слов.
2- Текстовые области для большого количества копий.
Решение
Лично я бы сделал это на долю секунды, скажем, от полсекунды. Если пользователь перестает печатать в течение указанного периода времени, выполняется сохранение. Это также довольно просто достичь:
var debounce = null;
$(document).ready(function() {
$('.field').keydown(function() {
clearTimeout(debounce);
debounce = setTimeout(function(){
// SAVE
}, 500);
});
});
Другие решения
Это не кодовый ответ на ваш вопрос.
Нет хорошего способа сделать это. Вы можете сделать обновления, основанные на количестве слов X, или вы можете сделать это каждый символ, или даже каждую секунду. Проблема в том, что это тонны соединений.
Он требует значительных ресурсов и пропускной способности, поэтому каждый раз, когда вы хотите сэкономить, вам нужно использовать интернет-соединение. Тогда у вас есть проблема относительно того, что вы хотите отправить в базу данных?
Как проверить, что база данных уже есть? Вы просто заново отправили все это?
Это все вопросы, на которые вы должны ответить. Но, по сути, это то же самое, что и сейчас … за исключением того, что у вас есть какой-то код (как я уже упоминал, смена символов, смена слов, смена времени), а затем будет выдвигаться либо весь текст / поле. или только то, чего нет в базе данных.
Так что нет ХОРОШЕГО способа сделать это. Если бы мне пришлось это сделать, я бы хранил информацию локально. Затем, скажем, каждые 30 секунд, обновите его и отправьте только измененные символы в базу данных.
Я бы предложил сделать автосохранение на onFocusout событие вместо onChange, Таким образом, это сократит запросы к серверу, когда входные данные теряют фокус. Добавьте класс в поля ввода, такие как class="autosave" а затем создать слушатель фокуса.
$('.autosave').focusout(function(){
autoSave();
});
Вот скрипка:
https://jsfiddle.net/fcLuw5p9/