通过 Ajax 保存文本区域而不会轰炸服务器

Question

我需要通过Ajax将textarea值保存到服务器。

• 我不希望用户必须单击"保存"按钮。文本必须自动保存。
• 我不想为每次击键都用新的保存请求轰炸服务器。
• 我必须确保即使用户填写文本区域并快速离开当前页面，文本也会被保存。

如果我做这样的事情，我会发送大量虚假请求(代码简化(：

jQuery("#mytextarea").on("input", function() {
   jQuery.ajax({...}); 
});

如果我正在做这样的事情，要么延迟太短，我仍然在发送大量慢打字员的请求......或者我冒着失去快速导航的用户的答案的风险：

var timeout = false;
jQuery("#mytextarea").on("input", function() {
   if(timeout) clearTimeout(timeout);
   timeout = setTimeout(function() {
       jQuery.ajax({...}); 
   }, delay);
});

是否有一个强大的解决方案可以向服务器发送尽可能少的请求，同时确保发送输入？我应该停止担心并在每次击键时轰炸我的服务器吗？

Answer 1

我最终选择在发送到服务器之前等待一定的延迟。为了确保没有答案丢失，在页面卸载时，我检查当前是否有延迟计时器正在运行。如果有，答案将立即发送到服务器。请求必须是同步的，以确保它能够解析，尽管代价是用户需要稍微多等待一段时间。

代码(简体(：

var timeout = false;
//As long as the user does not stop inputting for (delay), no input is sent
jQuery("#mytextarea").on("input", function() {
    if(timeout) {
        clearTimeout(timeout);
    }
    timeout = setTimeout(function() {
        jQuery.ajax({...}); 
        timeout = false;
    }, delay);
});
//Send input to server on page unload, IF it was not already
jQuery(window).on("onload", function() {
    if(timeout) {
        clearTimeout(timeout);
        jQuery.ajax({async: false, ...});
    }
});