自動保存時の最善のアプローチ

Question

「保存」ボタンを削除して、自動的に変更を保存します。

これがわかる方法は、OnChange関数を使うことです。

非常に多くの人がWebアプリケーションを使用することに注意してください。サーバーへの要求の数は、非常に短期間で圧倒的に多くなるでしょう。

大量のリクエストをサーバーに送信することなく自動保存するには、どのような方法が最適ですか？文字/単語の少量を持っているでしょう

の1-シンプルフィールド：

は、編集可能なフィールドの2つのタイプがあります。

2大量のコピーのテキスト領域。

Answer 1

これはあなたの質問に対する非コードの回答です。

これを行うには良い方法はありません。 Xの単語数に基づいて更新を行うこともできますし、すべての文字を1秒ごとに作成することもできます。問題はそれがたくさんのつながりだということです。

これはリソースと帯域幅が重く、保存するたびにインターネット接続を使用する必要があります。それでは、データベースに送信したいものに関する問題がありますか？

データベースの内容を確認するにはどうすればよいですか？あなたは全体を再送しますか？

これらはすべてあなたが答える必要のある質問です。しかし、本質的にはそれは今のものと同じです...あなたにはある種のコード（文字の変更、単語の変更、時間の変更が言及されています）を除いて、テキスト/フィールド全体をプッシュします。それがデータベースにないものだけを表示することができます。

だからいい方法はありません。もし私がそれをしなければならなかったら、私はその情報をローカルに保存するでしょう。その後、30秒に1回、データベースを更新し、変更された文字のみをデータベースに送信します。

Answer 2

onChangeの代わりにonFocusoutイベントで自動保存を行うことをお勧めします。そうすれば、入力がフォーカスを失ったときにサーバー要求を減らすことができます。​​などの入力フィールドにクラスを追加してから、フォーカスアウトリスナーを作成します。ここで

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

はフィドルです： 個人的にhttps://jsfiddle.net/fcLuw5p9/

Answer 3

、私は2番目に半秒を言うのデバウンス上でこれをやっていると思います。ユーザーが指定した時間だけ入力を停止すると、保存が実行されます。達成するのも簡単です：

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