Uncaught TypeError: Właściwość ... nie jest funkcją - po załadowaniu strony

Question

Używam żądania Ajax między domenami do zewnętrznego interfejsu API. Co tak często się nie powiedzie, z komunikatem konsoli:

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

Patrząc na JSON zwracane jest ważne JSON, więc nie jest to wina API zewnętrznym.

Nie mogę odtworzyć błędu w sposób wiarygodny: jedynym czynnikiem, który wydaje się powodować błąd, jest to, że szybko i wielokrotnie wywołuję żądanie.

W tym przypadku wywołuję żądanie Ajax, gdy użytkownik przenosi mapę Google (w celu dodania znaczników do mapy) i występuje, gdy użytkownik porusza się zbyt szybko.

Oto odpowiednie części mojego kodu:

// 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); 
}); 

Po google trochę, błąd Uncaught TypeError: Property 'photos' of object [object DOMWindow] is not a function ogólnie wydaje się występować podczas jQuery nie został załadowany.

Jednak nie widzę, że jest to tutaj istotne, ponieważ funkcja jest wywoływana z zdarzenia związanego z kafli mapy - i zazwyczaj nie strzela po raz pierwszy, ma tendencję do strzelania po pięciu lub sześciu szybkich mapach zmienia rozmiar . Więc jeśli to działa raz, strona na pewno nie może "zapomnieć" o jQuery?

Dzięki za porady.

Answer 1

Jeśli chcesz podać nazwę funkcji jQuery, że tworzy z obsługi success, ale w rzeczywistości nie definiują oddzielna funkcja używać, you should use jsonp: 'photos' instead of jsonpCallback: photos. Obecnie używa adresu URL w postaci photos, co oznacza, że ​​wywołuje photos({ ...data... }) po otrzymaniu odpowiedzi JSONP, a ta nie istnieje. Użycie jsonp option on $.ajax() utworzyłoby go. Masz kilka opcji tutaj.

Można to zrobić (w zakresie globalnym) którykolwiek z tych dwóch sposobów:

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 
} 

Lub, co zamierzałeś myślę:

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!"); 
     } 
    }); 
} 

.... lub po prostu zostawić zarówno wyłącz i pozwól jQuery nazwać wywołanie zwrotne success (dzieje się to domyślnie, na podstawie znacznika czasu).