0

問題

アクティブにすると、提案された件名のリストを表示する keyup イベントを登録しています (JSON を使用)。

私の問題は、キーアップが登録されると、以前のキーアップも覚えているように見えることです。これは、JSON で 1 つのリクエストを送信する代わりに、JSON で複数のリクエストを送信することを意味します (キーアップが登録されている数に応じて)。もちろん、これは非常に非効率的であり、キーアップごとに 1 つのリクエストだけで解決したいと考えています。

私は何を試しましたか

プログラムによって実行されるすべてのアクションを実行してみました。問題は、2 番目の keyup ステートメントに到達したときに発生します (1 番目はテンプレートに keyup を登録するためのもので、2 番目は指定されたフィールドから値を取得する、使用しているクラスの keyup です)。この時点から、すべてのキーアップが何らかの形で前のキーアップに「追加」され、たとえば、次のようになります。
前の 3 つのキーが押された -> (例) バックスペースが押された -> 4 つのキーアップがバックスペース キーアップに登録され、すべて同じキーアップが含まれます。情報。

以前のイベントが現在のイベントと同じかどうかを確認するステートメントなどを設定しようとしましたが、実際にはうまくいきませんでした。クラスはさまざまなサイトで機能するため、問題は別の場所にあると思います。おそらくテンプレート（キーアップを登録する別のイベントが含まれていますが、それを完全に削除しても何も変わりません）は、時間の経過とともにさまざまなプログラマーによって作成されました（そして、それは一種のめちゃくちゃですが、この奇妙な動作を引き起こすものは何も見えません)。

関連コード

テンプレートコード: 

$('subject_input').addEvent('keyup', function(event){
    var project_id = $('projectId').options[$('projectId').selectedIndex].get('value');

    if(project_id != "" && project_id != 0){ //Als er een project geselecteerd is 
        var elInput = $('subject_input');

        var gc = new GooCompleter('subject_input', {
            action: '/houroverview/ajax_subjects/'+project_id+'/',  // JSON source 
            param: 'search',            // Param string to send 
            listbox_offset: {x: 0, y: 0},   // Listbox offset for Y 
            typebox_offset: {x: 1, y: 1},
            delay: 100,                     // Request delay to 0.1 seconds 
        });
//Irrelevant code

                });

クラスコードのキーアップ:

 // Retrieve suggestions on keyup
    this.field.addEvent('keyup', function(event) {
        console.log(event); //this shows the amount of keyups etc.
        //more code
    }.bind(this));

私は JavaScript がそれほど得意ではないことを指摘しておく必要があります。つまり、何かを理解するのに多くの時間がかかります。このコードには、このような奇妙な動作を生成するものはまだ見当たりません。

質問

この奇妙な動作の原因は何ですか?どうすればそれを取り除くことができますか?

乾杯。

4

2 に答える 2

1

ドキュメントによると、GooCompleterそれ自体でキープレスを監視します。一度だけ初期化する必要があります (たとえば、domreadyイベント ハンドラーで)。

現在の実装では、キーアップごとに の新しいインスタンスGooCompleterが作成されるため、たとえば 10 回のキーアップの後に 10GooCompleter秒があり、それぞれがキープレスを監視し、AJAX 要求を送信します (したがって、後続のキーアップは 10GooCompleter秒間 10 個の AJAX 要求を送信します)。 .

于 2012-08-06T10:43:06.300 に答える
1

ええ、あなたのコードによると、キーアップごとに新しいリクエストが行われるようです。これは奇妙な動作ではなく、コードが行うことです。ブラウザは、キーアップが発生するたびにキーアップが発生したことを示し (キーボードで任意のキーが離されます)、コードは各キーアップへの反応としてリクエストを送信します。

最後のものを除いてすべて無視することもできますが、より効果的に、ユーザーが入力を停止するまで、たとえば 500 ミリ秒要求を送信しないようにすることもできます。

$('subject_input').addEvent('keyup', throttle( function(event) {
    //Once no keyup has happened for 500ms, this function is then called normally
}, 500 ));

スロットルの定義:

function throttle( fn, timeout ) {
    var timerid = 0;

    return function() {
        clearTimeout(timerid);

        var args = [].slice.call(arguments),
            ctx = this;

        timerid = setTimeout( function() {
            fn.apply( ctx, args );
        }, timeout );

    };
}
于 2012-08-06T09:48:03.233 に答える