web-dev-qa-db-ja.com

ChromeのJQueryによる停止および保留中のajaxリクエスト

時々、アプリケーションでのAjax呼び出し（JQuery 1.8経由）が長時間（「最大17分間」）状態が「保留中」のままになります。私はそれをグーグルで調べましたが、すべての可能な解決策は機能しませんでした：

  1. 広告ブロッカーがインストールされていません。
  2. Chromeで「ネットワークアクションを予測してページの読み込みパフォーマンスを向上させる」フラグを無効にしました。
  3. また、Ajax呼び出しにクエリ文字列を追加して一意にします（Chromeキャッシュロックを無効にするため）。

これを解決する方法はありますか？ありがとう。

以下の例では、要求は17分間保留されていました（17分後にのみ送信されたことをFiddlerで検証しました）。

   GET http://www.mywebsite.com/foo/rest/publishers/1/packages?_=1421584749323    HTTP/1.1
   Host: www.mywebsite.com
   Connection: keep-alive
   Accept: application/json, text/javascript, */*; q=0.01
   X-Requested-With: XMLHttpRequest
   User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36    (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36
   Content-Type: application/json
   Referer: http://www.mywebsite.com/foo/client/home
   Accept-Encoding: gzip, deflate, sdch
   Accept-Language: en-US,en;q=0.8,he;q=0.6,ru;q=0.4
   Cookie: JSESSIONID=C668509B5AFCDEBE9C9774C4721AFB9D;
   aaassz="ddss"

画像をご覧ください： https://drive.google.com/file/d/0B9uQiZLJG1csNzlPcHZEWHl1Z2c/view

jqueryajaxgoogle-chromexmlhttprequest
22
Wasafa1

私はまったく同じ問題につまずいた。無効にするとすぐに：

予測サービスを使用して、ページをより迅速に読み込む

進む詳細設定->プライバシー->約3番目のチェックボックス、すべてが正常に機能し始めました。エラーを再現できませんでした。

jquery/ajax pollerはFirefoxで完全に機能します。 Chrome-LinuxおよびWindowsでテスト済みです。

グローバルな意味でユーザーに影響を与えることはないため、完璧なソリューションではありません。

7
michael

私はこれが古いスレッドであることを知っていますが、これに対する何らかの答えを見つけようと急いでいる人々のためにこれを投稿しています。私もこのヘッドスクラッチャーに対処しなければなりませんでした。私の問題は、広告ブロッカーがWordの「クーポン」を含むAPI呼び出しをブロックしたことが原因でした。リクエストをブロックしていました。数ブロック後、すべてのリクエストが自動的に保留状態になります。これは、ライブリクエストが多すぎる（6または7前後だと思います）ためです。

chromeアドレスバーにchrome：// net-internals /＃eventsと入力して、リクエストを検査します。これにより、問題のより明確な概要が得られます。これを理解しようとしています。

デバッガのスクリーンショット

ネット内部のスクリーンショット

3
Bahram Ghahari

これを試すことができます。

実際の作業コードで更新されました

（自分のタイムゾーンコードを使用したため、タイムゾーンへの参照を許しません）

まず配列を初期化し、リクエストカウントロジックを実行します

var request = ( typeof request != 'undefined' && request instanceof Array ) ? request : [];
var pendingAjax = ( typeof pendingAjax != 'undefined' && pendingAjax instanceof Array ) ? pendingAjax : [];

。ajaxStart および 。ajaxStop を使用して、アクティブなリクエストを追跡します。

var ajaxActive = 0;
$( document ).ajaxStart(function() {
  ajaxActive++;
  document.ajaxQueueFull = ajaxActive > 5;
});
$(document).ajaxStop(function() {
  ajaxActive--;
  document.ajaxQueueFull = ajaxActive > 5;
}

新しいリクエストを作成する関数を作成します

    function ajaxRequestNew(t, u, d, s) {

        var instance = request.length + 1;
        request[instance] = $.ajax({
            method: t,
            url: u,
            data: {ajaxPost: d },
            success: s
        });
        return instance;
    }

今、返されたインスタンス番号を取得するリクエストを作成します

    var instance = ajaxRequestNew('POST', 
                                  'js/ajax_timezone.php', 
                                  { ajaxAction : "ajaxGetTimezone", 
                                    tzoffset : "0", 
                                    tztimezone: "America/New_York" },
                                    function(data) {  }
    );

$ .ajax（）関数はXMLHttpRequestオブジェクトを返します。したがって、whileループを使用して、ajaxが実際に送信され、リクエストがストールした場合に他のアクティブなリクエストを中止するタイミングをチェックします。

    while(request[instance] === null || (request[instance].readyState < 1 || request[instance].readyState > 4)) {
        if (document.ajaxQueueFull) {
            //abort existing requests
            $.each(request, function(i,v) {
                if (i !== instance) {
                    request[i].abort();
                }
            });
        }
    }

リクエストをスタックにプッシュします

    pendingAjax.Push(request[instance]);

リクエストのコールバックを作成します

  var timezoneFailCallback = function(data) {
        console.log('fail');
        console.dir(data);
    };

    var timezoneSuccessCallback = function(data) {
        console.log('success');
        console.dir(data);
    };

コールバックを適用するタイミングを使用する

    $.when.apply($, pendingAjax).done( timezoneSuccessCallback ).fail( timezoneFailCallback);

コードはアプリのために少し調整する必要があるかもしれませんが、うまくいけばアイデアが得られます。ご質問がある場合はお知らせください。

3
Tech Savant