キャッチされないTypeError：プロパティが...関数ではありません - ページがロードされた後

Question

私はクロスドメインのAjaxリクエストを外部APIに使用しています。しょっちゅうそれが失敗し、コンソールメッセージで：

Uncaught TypeError: Property 'photos' of object [object DOMWindow] is not a function 

が返されるJSONを見ると、それが有効なJSONですので、外部APIのせいではありません。

エラーを確実に再現することはできません。エラーを引き起こすように見える唯一の要因は、要求を迅速かつ繰り返し呼び出す場合です。

この場合、ユーザーがGoogleマップを移動して（地図にマーカーを追加する）、Ajaxリクエストを呼びます。これは、ユーザーがあまりにも早く移動する場合に発生します。ここで

は、私のコードの関連部分です：

// Code located inside an external JS file referenced inside the head 
// Not wrapped inside document.ready - but all the code setting up 
// the map (calling a function which calls a function which adds the 
// tilesloaded listener) *is* inside document.ready 
function addMarkers() { 
    var pm_url = "http://www.cyclestreets.net/api/photos.json?key=" + MY_KEY; 
    $.ajax({ 
     url: pm_url, 
     crossDomain: true, 
     contentType: "application/json", 
     dataType: 'jsonp', 
     data: pmdata, 
     jsonpCallback: 'photos', 
     success: function(data) { 
     // TBA 
     }, 
     error: function() { 
      alert("Sorry, error retrieving photos!"); 
     } 
    }); 
} 
google.maps.event.addListener(map, 'tilesloaded', function() { 
addMarkers(map); 
}); 

ビットをGoogleで検索したので、エラーUncaught TypeError: Property 'photos' of object [object DOMWindow] is not a functionは、一般的にはjQueryがロードされていないときに発生するようです。

しかし、私はこの関数がマップのtilesloadedイベントから呼び出され、通常は最初に起動しないため、マップが5〜6回のマップのサイズ変更後に起動する。だから一度動くと、ページは確実にjQueryについて「忘れている」ことはできません。

ご協力いただきありがとうございます。

Answer 1

あなたはjQueryのハンドラあなたのsuccessから作成しますが、実際に、you should use jsonp: 'photos' instead of jsonpCallback: photosを使用するに別の関数を定義していないことを関数の名前を指定します。現在、URLにphotosを使用しています。つまり、JSONP応答が返ってきたときにphotos({ ...data... })という呼び出しがあり、存在しません。 jsonp option on $.ajax()を使用すると作成されます。ここにはいくつかのオプションがあります。

次のいずれかのこれらの2つの方法の（グローバルスコープで）これを行うことができます：

function addMarkers() { 
    var pm_url = "http://www.cyclestreets.net/api/photos.json?key=" + MY_KEY; 
    $.ajax({ 
     url: pm_url, 
     crossDomain: true, 
     contentType: "application/json", 
     dataType: 'jsonp', 
     data: pmdata, 
     jsonpCallback: 'photos', 
     error: function() { 
      alert("Sorry, error retrieving photos!"); 
     } 
    }); 
} 
function photos(data) { 
    // TBA 
} 

それとも、私が何を考えてあなたが意図：

function addMarkers() { 
    var pm_url = "http://www.cyclestreets.net/api/photos.json?key=" + MY_KEY; 
    $.ajax({ 
     url: pm_url, 
     crossDomain: true, 
     contentType: "application/json", 
     dataType: 'jsonp', 
     data: pmdata, 
     jsonp: 'photos', 
     success: function(data) { 
     // TBA 
     }, 
     error: function() { 
      alert("Sorry, error retrieving photos!"); 
     } 
    }); 
} 

....または単に両方を残しますオフにして、jQueryにsuccessコールバックの名前を付けさせます（これはタイムスタンプに基づいてデフォルトで行われます）。