1

プラットフォームを悩ませている問題に取り組む必要があります。製品のWebサイトにこのレポートページがあり、ユーザーはレポートを作成できます。レポートは大きすぎて生成できない可能性があり、数分ほどかかります。一部のユーザーは焦り、生成ボタンを何度もクリックします。ボタンに時間を設定することは可能でしょうか。つまり、誰かが[レポートの生成]ボタンをクリックしたときに、ページがさらに5分間再度押すことを許可しないのではないかと思いました。より興味深いシナリオは、Cookieに何かを保存するか、ページを更新してもクリックされないようにすることです。

私はjQueryのプロではないので、この問題に関するいくつかの良いアイデアや例を教えていただければ幸いです。

4

3 に答える 3

5

もちろん、ローカルストレージを使用してタイムスタンプを設定し、jQueryを使用して無効なプロパティを簡単に設定できます。

クリックで無効にするには：

$('#myButton').on('click', function() {
    var $this = $(this);
    $this.prop('disabled', true);
    localStorage.myButtonEnableAt = new Date().getTime() + 30000;

    setTimeout(function(){
        $this.prop('disabled', false);
        localStorage.myButtonEnableAt = null;
    }, 30000);
});

ページの読み込み時に、状態を確認します。

var now = new Date().getTime();
if (localStorage.myButtonEnableAt > now ) {
    $('#myButton').prop('disabled', true);
    setTimeout(function(){
        $('#myButton').prop('disabled', false);
        localStorage.myButtonEnableAt = null;
    }, localStorage.myButtonEnableAt - now);
}

デモ： http： //jsfiddle.net/36JrM/-より高速なデモのために10秒無効に変更されました。ボタンをクリックします。5秒後、ページを更新すると、予想どおり5秒後に有効になります。

于 2013-02-28T23:42:34.070 に答える
0

単純なケースでは、ボタンを無効にすることができます。

$('input').click(function() {
    $(this).prop('disabled', true);
});

より良い解決策は、進行状況インジケーター（または少なくとも回転するホイール）を表示して、何かが行われていることをユーザーに知らせることです。また、7分間ゆっくりと増加する偽のプログレスバーを作成することもできます。

本当の問題は、ユーザーがフィードバックを受け取らないことです。そのため、ユーザーはボタンを押して、ある種のフィードバックを受け取ります。ボタンを無効にして再送信させないようにすると、イライラする可能性がありますが、ユーザーに何らかの進歩を与えることで、ユーザーを満足させることができると思います。

于 2013-02-28T23:44:59.763 に答える
0

フォームの場合、私は通常このようなことを行うので、ボタンをクリックするだけでなく、あらゆる種類の送信を処理します。

$('form').bind('submit',function(e){
    var $form = $(this);

    if ($form.data('submitted') === true){
        e.preventDefault();
    } 
    else {
        $form.data('submitted', true);
    }

    setTimeout(function(){
        $form.data('submitted', false);
    }, 30000);
});

ボタンの場合のみ.prop('disabled', true)、他の回答に記載されているように使用できます。

于 2013-02-28T23:48:40.463 に答える