jquery - ajax呼び出しが完了するまで、「イベントバブルオーダー」までのイベントの実行を遅らせます

Question

編集：アンカー要素でプログラム的にクリックイベントを実行すること、またはwindow.openを使用することについてのコメントに応えて、ポップアップブロッカーのためにこれらを使用できません。ユーザーによるアンカーの元のmouseclickイベントがコースを完了することを許可する必要があります。その結果、新しいウィンドウのブロックが解除されます。

ここでの最善の妥協案は、同期ajaxリクエストを実行し、リクエストが完了するまでユーザーにスピナーgifを提示することです。

編集：フィドルhttp://jsfiddle.net/cXdJg/35/

プレーヤーページへのリンクがあるWebエディターの場合を考えてみましょう。

hrefがプレーヤーに設定されているリンクをクリックすると、エディターはコンテンツがサーバーに保存されているかどうかを確認します。

はいの場合：何もしません。

そうでない場合：コンテンツを保存するためにajaxリクエストを実行します。ajax呼び出しの終了時：アンカー要素のクリックイベントの続行を許可します。新しいブラウザウィンドウでプレーヤーページのリクエストが実行されます。

ブラウザをフリーズせずに、アンカー要素のクリックイベントをインターセプトする関数の終了をajax呼び出しが終了するまで遅らせるにはどうすればよいですか？http://www.devcheater.com/#Conclusionを参照してください

http://ajaxpatterns.org/Submission_Throttlingを確認しましたが、ここでその例を適用する方法がわかりません。

コード形式のアイデアの例：

$('a.play').click(function){
    if(!isSaved){
          save();  //saves the content and **sets isSaved to true**
    }
     while (!isSaved){
          //burn time until isSaved,  but don't freeze the browser!
     }
     //allow the event handler to end, after which the click on anchor element will
     //  load the player page in new window.
}

Answer 1

あなたが投稿したリンク ( http://www.devcheater.com/#Conclusion ) は、ここでのあなたの最大の問題を示していると思います: あなたが具体的にやりたいことは可能ではないようです。ただし、次のようなことを試すこともできます (コードは JSFiddle から再利用されます)。

このアプローチでは、関数からリンクを開くという考えで、clickハンドラーが を返すことはできません。これは を使用するため、ポップアップはユーザーが許可するまでブロックされる可能性があります。truesuccesswindow.open

$('.wait').click(function(event){
    var $element = $(this);

    $.ajax({
        type: "POST",
        url: 'some_url',
        data: '',
        cache: false,
        success: function() {
            $('.result').html("ajax call complete on "+ new Date().toTimeString());

            var href = $element.attr('href');

            if (typeof href != "undefined") {
                window.open(href);
            }                    
        }
    });

    event.preventDefault();
    return false;
});

Answer 2

クリックとロードのイベント リスナーを追加し、関連するイベント ハンドラーをコードに作成します。

// handles click
var handleClick = function(event){
var $element = $(this);

$.ajax({
    type: "POST",
    url: 'some_url',
    data: '',
    cache: false,
    async: false,
    success: function() {
        $('.result').trigger('loaded', $element.attr('href'));
    }
});

// Handles loaded state
var handleLoad = function(href){
    $(this).html('ajax call complete on '+ new Date().toTimeString());
    // your window is already loaded.
};

// create the event listeners
$(document).on('click', '.wait', handleClick);
$(document).on('loaded', '.result' handleLoad);

Answer 3

ご覧のとおり、いくつかのオプションがあります。

• 関数ブロックの実行をキューに入れ、それらを同期させることができるjQueryキューメソッドを見ることができます。
• jQuery.trigger()別のアプローチとして、ajax の完了ハンドラーを使用してクリック イベントをトリガーすることもできます。一部のイベント ハンドラーが 2 回実行されるかどうかが問題にならない場合、これが最も簡単な解決策になります。
• 最後に、を使用してイベントからすべてのイベントハンドラーを抽出し$('[href tag event trigger]').data('events')、現在のコンテキストで関数のイベントハンドラーを削除し、保存の ajax 完全ハンドラーで残りを呼び出すことができます。

http://api.jquery.com/queue/

http://api.jquery.com/trigger/

http://api.jquery.com/data/

Answer 4

jQuery.ajax asyncオプションを見てください。

$.ajax({
  url: '.....',
  async: false      //Here
});

Answer 5

解決策 1

「プレーヤー」コードを制御できますか? Player を開く前にデータが保存されるのを待つ代わりに、データの準備ができるまで Player を待機させます。

あなたはこのようにすることができます：

リンクをクリックしてisSavedが false になると、すぐに AJAX非同期呼び出しを開始してデータを保存し、プレーヤーを新しいウィンドウで開きます。

Player のリンクには、(URL に) データの準備ができていない (保存中) ことを示すパラメーターがあります。プレーヤーは、データの「最後のバージョン」についてサーバーにクエリを開始します (数秒ごとに 1 回の非同期 ajax 呼び出し)。

保存されたデータの準備が整うと、プレーヤーに提供されます。

1 つの重要な詳細: Player がサーバーにデータを要求するとき、そのデータの最新バージョンが提供されることが基本です。

これを確実に行うには、データの最新バージョンを識別するためのキーとなる乱数を生成する必要があります。

データを保存するときに、ajax 呼び出しと共にキーを渡します。Player を呼び出す URL と一緒に渡します。繰り返しますが、プレーヤーは、保存されたデータを照会するときにキーをサーバーに渡します。

実装するよりも説明する方が難しい！

解決策 2

ユーザーが変更を加えたら、リンクを無効にして保存を開始し、保存が完了したらリンクを再度有効にします。

リンクがクリックされると、 isSavedは常に true になります。

--

お役に立てれば..

Answer 6

while( !isSaved )
$.delay(100);