javascript - 未捕获的 TypeError : Property . .. 不是函数 - 页面加载后

Question

我正在对外部 API 使用跨域 Ajax 请求。它经常失败，并显示控制台消息:

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

查看返回的JSON，是合法的JSON，所以不是外部API的问题。

我无法可靠地重现错误:似乎触发错误的唯一因素是当我快速重复地调用请求时。

在这种情况下，当用户移动 Google map (向 map 添加标记)时，我将调用 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 尚未加载时发生。

但是，我认为这与此无关，因为该函数是从 map 的 tilesloaded 事件调用的 - 它通常不会在第一次触发，它往往会在五六次快速调整 map 大小后触发。因此，如果它运行一次，那么该页面肯定不会“忘记”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 回调(默认情况下发生，基于时间戳)。