1

私が探しているのは少し主観的ですが、これを行うためのより良い方法があると確信しています。

ユーザーが Web サイトのテキストエリアまたは入力ボックスにコンテンツを入力しているときに、JavaScript を実行するより良い方法を探しています。たとえば、Google Docs などのサイトでは、パフォーマンスを著しく低下させることなく、ほぼ瞬時にドキュメントの変更を保存できます。ただし、多くのサイトでは、次のような jQuery を少し使用しています。

$("#element").on("keyup", function() { /* Do something */ });

これは、検索ボックスでのオートコンプリートなどの単純なことには問題なく機能しますが、対処しなければならない大きなコーパスがあると (またはユーザーがすばやく入力した場合)、パフォーマンスは悪夢になります。

ユーザーが入力しているときにテキストを分析/保存/保存するためのより良い方法を見つけようとして、私は次のようなことを始めました:

var changed = false;
$("#element").on("keyup", function() { changed = true });
setInterval(function() { if(changed) { /* Do something */ changed = false; } }, 1000);

テキスト入力の遅れや遅れを軽減するように見えますが、私にはエレガントな解決策とは言えません。

私の質問に戻りますが、コーパスが変更されたときに JavaScript を実行するより良い方法はありますか? 間隔を使用する以外の解決策はありますか?

ありがとう。

4

3 に答える 3

2

あなたがしたことのほとんどを行うjQueryプラグインがあります。あなたの例は次のように変換されます

$("#element").on("keyup", $.debounce(1000, function() { /* Do something */ }));

このコードは、ユーザーが 1000 ミリ秒の間キーを押さなかった後に実行されます。

于 2013-10-21T05:57:18.903 に答える
1

これに対する非常に良い解決策を見つけました。このコードは、コンテンツが変更されたかどうかを確認し、それに基づいて保存します。そうでない場合、保存機能は実行されません。

このデモをチェックしてくださいJSFIDDLE

コードは次のとおりです。

HTML :

Content:<br>
<br>
(type some text into the textarea and it will get saved automatically)
<textarea rows="5" cols="25" id="content"></textarea>
<br>
<span id="sp_msg_saved" style="background-color:yellow; display:none">Content is saved as draft !</span>

JS:

var old_content = "";
function save_content()
{
    var current_content = $('#content').val();
    //check if content has been updated or not
    if(current_content != old_content)
    {
        alert('content is updated ! Save via ajax');
        old_content = current_content;
        $('#sp_msg_saved').show(100);
        $('#sp_msg_saved').fadeOut(3000);
    }
}
setInterval(save_content,3000);

setInterval関数の値を変更することで、save 関数が呼び出す時間を増減できます。現在のユーザーコンテンツをDBに保存する、ajax経由でコンテンツを保存するためのコードを入れてください。私はそれを含めていません...

于 2013-10-21T06:17:48.010 に答える