Web フォーム送信時のクリックのデバウンス

StackOverflow https://stackoverflow.com/questions/97962

  •  01-07-2019
  •  | 
  •  

質問

私たちが接続しているバックエンド システムが不適切に作成されているため、生成されている負荷の処理に問題が発生しています。彼らが負荷の問題を解決している間、私たちは生成される追加の負荷を軽減しようとしています。その 1 つは、同じユーザーから別の送信が行われた場合でも、バックエンド システムが引き続きフォーム送信の処理を試行することです。

私たちが気づいたことの 1 つは、ユーザーがフォーム送信ボタンをダブルクリックしていることです。これらのクリックをデバウンスし、2 回目のフォーム送信を防ぐ必要があります。
私のアプローチ (プロトタイプを使用) は、 onSubmit フォーム上で次の関数を呼び出すと、フォーム送信ボタンが非表示になり、「読み込み中...」が表示されます。 div.

function disableSubmit(id1, id2) {
    $(id1).style.display = 'none';
    $(id2).style.display = 'inline';
}

このアプローチで私が発見した問題は、「読み込み中...」でアニメーション GIF を使用すると、 div, 、正常に読み込まれますが、フォームの送信中にアニメーションが表示されません。

このデバウンスを実行し、フォームの結果が（最終的に）読み込まれるまで待機している間、ページ上にアニメーションを表示し続けるより良い方法はありますか？­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

役に立ちましたか？

解決

jQuery が手元にある場合は、最初の送信後にボタンを無効にする click() イベントをアタッチします。

$('input[type="submit"]').click(function(event){
 event.preventDefault();
 this.click(null);
});

そういうこと。

他のヒント

プロトタイプを使用すると、次のコードを使用してフォームが送信されたかどうかを監視し、送信された場合にはすべての送信ボタンを無効にすることができます。

document.observe( 'dom:loaded', function() { // when document is loaded
    $$( 'form' ).each( function( form ) { // find all FORM elements in the document
        form.observe( 'submit', function() {  // when any form is submitted
            $$( 'input[type="submit"]' ).invoke( 'disable' );  // disable all submit buttons
        } );
    } );
} );

これは、送信ボタンをダブルクリックするユーザーに役立つはずです。ただし、他の方法でフォームを送信することも可能です (例:テキストフィールドで Enter キーを押します)。これを防ぐには、最初のフォーム送信の後でフォーム送信の監視を開始し、それを停止する必要があります。

document.observe( 'dom:loaded', function() {
    $$( 'form' ).each( function( form ) {
        form.observe( 'submit', function() {
            $$( 'input[type="submit"]' ).invoke( 'disable' );
            $$( 'form' ).observe( 'submit', function( evt ) { // once any form is submitted
                evt.stop(); // prevent any other form submission
            } );
        } );
    } );
} );

上記はすべて良い提案です。あなたが言うように本当に「デバウンス」したいのであれば、そのための素晴らしい機能があります。詳細については、 unscriptable.com

var debounce = function (func, threshold, execAsap) {

    var timeout;

    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };

        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);

        timeout = setTimeout(delayed, threshold || 100); 
    };

}

スタイルを変更するだけでなく、input (type=submit) 要素に「disabled」フラグを設定してみることもできます。これにより、ブラウザ側から完全にシャットダウンされるはずです。

見る： http://www.prototypejs.org/api/form/element#method-disable

AJAX を使用してフォームを送信すると、GIF がアニメーション化されます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top