tablas - obtener id de un elemento javascript

El mejor enfoque para guardar automáticamente el cambio

Question

Quiero eliminar el botón "guardar" y guardar automáticamente los cambios en vivo.

La forma en que sé que esto se puede hacer es mediante el uso de la función OnChange.

Teniendo en cuenta que la aplicación web será utilizada por un gran número de personas, la cantidad de solicitudes al servidor probablemente alcanzará un nivel abrumador en un período de tiempo muy corto.

¿Cuál es el mejor enfoque para guardar automáticamente sin abrumar / enviar tantas solicitudes al servidor?

Hay dos tipos de campos editables:

1- Campos simples que tendrían una pequeña cantidad de letras / palabras.

2- Áreas de texto para una gran cantidad de copia.

Answer 1

Esta es una respuesta sin código a su pregunta.

No hay una buena manera de hacer esto. Puede hacer las actualizaciones basadas en X cantidad de palabras, o puede convertirlo en cada personaje, o incluso cada segundo. El problema es que hay toneladas de conexiones.

Se trata de recursos y ancho de banda pesados, lo que requiere que utilice una conexión a Internet cada vez que quiera ahorrar. Entonces, ¿tiene el problema con respecto a lo que desea enviar a la base de datos?

¿Cómo se comprueba para ver qué tiene la base de datos? ¿Acabas de volver a enviar todo?

Estas son todas las preguntas que debe responder. Pero, en esencia, es lo mismo que ahora ... excepto que tiene algún tipo de código (como mencioné cambio de carácter, cambio de palabra, cambio de tiempo) y luego presiona el texto / campo completo. o simplemente lo que no tiene en la base de datos.

Entonces no hay una BUENA manera de hacerlo. Si tuviera que hacerlo, almacenaría la información localmente. Entonces digamos una vez cada 30 segundos, actualícela y envíe solo los caracteres modificados a la base de datos.

Answer 2

Personalmente, estaría haciendo esto en un rebote de decir medio segundo a un segundo. Si un usuario deja de escribir durante un período de tiempo específico, se ejecuta el guardado. También es bastante simple de lograr:

var debounce = null;
$(document).ready(function() {
    $(''.field'').keydown(function() {
        clearTimeout(debounce);
        debounce = setTimeout(function(){
            // SAVE
        }, 500);
    });
});

Answer 3

Sugeriría hacer autoguardar en el evento onFocusout lugar de onChange . De esta forma, reducirá las solicitudes del servidor cuando las entradas pierdan el foco. Agregue una clase a los campos de entrada como class="autosave" y luego cree un oyente de enfoque.

$(''.autosave'').focusout(function(){
  autoSave();
});

Aquí hay un violín: https://jsfiddle.net/fcLuw5p9/