Uncaught TypeError: Property ... is not a function - 页面加载后

Question

我正在使用对外部 API 的跨域 Ajax 请求。每隔一段时间，它就会失败，并显示控制台消息：

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 事件中调用的 - 它通常不会在第一次触发，它往往会在五六次快速调整地图大小后触发。所以如果它工作一次，页面肯定不会“忘记”jQuery？

感谢您的建议。

Answer 1

如果您想指定 jQuery 从您的 success 处理程序创建的函数的 名称，但实际上没有定义 要使用的单独函数，you should use jsonp: 'photos' instead of jsonpCallback: photos .目前它在 URL 中使用 photos，这意味着当 JSONP 响应返回时它正在调用 photos({ ...data... })，而这并不存在。使用jsonp option on $.ajax() 将创建它。这里有几个选项。

您可以通过以下两种方式之一（在全局范围内）执行此操作：

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 回调（这是默认情况下发生的，基于时间戳）。