0

私のページにはリンクがあります。ユーザーがこのリンクをクリックすると、いくつかのデータが読み込まれ$.getJSONます。サーバーがビジー状態であるか、インターネット速度の接続が遅い場合、この応答には約 10 秒かかるため、ユーザーはこれを再度クリックする可能性があります。リンク、コードを変更して 2 回目のクリックを防ぐにはどうすればよいですか? つまり、ユーザーがリンクを2回クリックしたかどうかを定義するにはどうすればよいですか?

これはクリックイベントです:

$('#showResult').click(function () {
     $.getJSON (url, data, function updateForm() {

        .... MY CODE ....

     });
});

私の悪い英語でごめんなさい:-(

4

4 に答える 4

2

次のようなことができます：

$('#showResult').click(function () {
     var _this = this;
     if (this.inprogress) {
         alert('please wait');
         return;
     }
     this.inprogress = true;
     $.getJSON (url, data, function updateForm() {

        .... MY CODE ....
        _this.inprogress= false;
     });
});

しかし、通常、進行状況スピナーを表示し、長いロードが進行中の場合はウィンドウ全体を灰色にすることを好みます。これにより、ユーザーは待機する必要があることがわかります。

loading = {
    count: 0
};

loading.finish = function() {
    this.count--;
    if (this.count==0) this.$div.hide();
};

loading.start = function() {
    this.count++;
    if (!this.$div) {
        var html = '<div style="position: fixed;z-index:100;left:0;top:0;right:0;bottom:0;background: black;opacity: 0.6;">'; // this class covers and greys the whole page
        html += '<table width=100% height=100%>';
        html += '<tr><td align=center valign=middle>';
        html += '<img src=img/loading.gif>';
        html += '</td></tr>';
        html += '</table></div>';
        this.$div=$(html);
        this.$div.prependTo('body');
    }
    setTimeout(function(){
        if (loading.count>0) loading.$div.show();
    }, 500);
};

$('#showResult').click(function () {
     loading.start();
     $.getJSON (url, data, function updateForm() {

        .... MY CODE ....

        loading.finish();
     });
});

(このコードでは、ajax 呼び出しに 500 ミリ秒以上かかる場合にのみスピナーが表示されます)。

于 2012-07-16T11:58:45.020 に答える
1

次のように、クリックのバインドを解除してみてください

$('#showResult').click(function () {
     $(this).unbind("click");
     $.getJSON (url, data, function updateForm() {

        .... MY CODE ....
        //after response data you can rebind it

     });
});

または、ワンクリック後に「クリックされた」をデータとして追加するなど、いくつかの属性を追加してチェックすることができます

$('#showResult').click(function () {
     if($(this).data("clicked") {
         return false;
     }
     else {
       $.getJSON (url, data, function updateForm() {

        .... MY CODE ....
        $('#showResult').data("clicked", true);
       });
     }
});
于 2012-07-16T11:58:43.383 に答える
1

このコードは、要素のダブルクリックをキャプチャし、そのイベントが発生しないようにする必要があります。

$("#showResult").on('dblclick',function(e){
  e.preventDefault();
});

他のアクションが発生しているときに、要素の 2 回目のクリックを単に防ぎたい場合は、ブール値フラグを使用できます。のようなものisWorking。

var isWorking = false;

$("#showResult").on('click',function(){
  if (!isWorking){
    //execute code here!
    isWorking = true;
  }else{
    // wait! something is still working!
  }
});

アクションが完了したら、フラグを元の位置に戻すことを忘れないでください。

isWorking = false;

于 2012-07-16T11:58:50.380 に答える
0 
var doJson = function(doCallback) {
     $('#showResult').unbind('click');
     $.getJSON (url, data, function updateForm() {
        .... MY CODE ....
        doCallback();
     });
}

$('#showResult').click(function () {
    doJson(function() {
        $('#showResult').bind('click', this));
    });
});

コールバックは関数をバインドし、関数はバインドを解除します:)

于 2012-07-16T12:00:54.217 に答える