自动保存变更的最佳方法

Question

我想删除“保存”按钮并实时自动保存更改。

我知道这一点的方法是使用OnChange函数。

请注意，Web应用程序将被很多人使用，对服务器的请求数量很可能会在很短的时间内达到压倒性水平。

自动保存的最佳方法是什么，而不会压倒/向服务器发送如此多的请求？

有两种类型的可编辑字段：

1-简单字段，其中包含少量字母/单词。

2-大量复制的文本区域。

Answer 1

就个人而言，我会在半秒到一秒的辩论中这样做。如果用户在指定的时间段内停止输入，则会执行保存操作。实现起来也很简单：

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

Answer 2

这是您的问题的非代码答案。

没有好办法做到这一点。您可以根据X字数量进行更新，也可以每个字符甚至每秒进行更新。问题是大量的连接。

资源和带宽很重，每次要保存时都要求使用互联网连接。那你有关于要发送到数据库的问题吗？

如何查看数据库已有的内容？你刚重新发送一件事吗？

这些都是您必须回答的问题。但基本上它与现在一样......除了你有某种代码（如我提到的字符更改，单词更改，时间更改），然后将推送整个文本/字段。或者只是它没有进入数据库的内容。

所以没有好方法可以做到。如果我必须这样做，我会在本地存储信息。然后让我们说每30秒一次，更新它并仅将更改的字符发送到数据库。

Answer 3

我建议您在onFocusout事件而不是onChange上进行自动保存。这样，当输入失去焦点时，它将减少服务器请求。将类添加到输入字段（例如class="autosave"），然后创建焦点侦听器。

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

这是一个小提琴： https://jsfiddle.net/fcLuw5p9/