在jQuery中关闭异步请求解决了该问题。
我的页面中有以下Javascript和AJAX请求(使用jQuery):
"use strict";
var hsArea, counter, hotspots, count;
counter = 4;
count = 0;
hotspots = {};
function fetchHotspotList() {
$.getJSON ('/alpha/engine/hotspots/gethotspot.php', {'type' : 'list'}, function(json) {
hotspots = json;
});
}
function displayHotspot(type, id, number) {
$.ajax({
url: '/alpha/engine/hotspots/gethotspot.php',
dataType: 'json',
data: {'type' : type, 'id' : id},
success: function(json) {
console.log(json);
var hotspot, extract;
extract = json.content;
extract = extract.replace(/<(?:.|\n)*?>/gm, '');
extract = extract.substring(0, 97);
extract = extract + "...";
json.content = extract;
hotspot = document.createElement("div");
hsArea.append(hotspot);
hotspot.setAttribute('class','hotspot');
hotspot.setAttribute('id','hotspot' + number);
$(hotspot).css('position', 'absolute');
$(hotspot).css('top', number * 100 + 100);
$(hotspot).css('left', number * 100 + 110);
hotspot.innerHTML = "<h1>"+ json.title + "</h1><p>" + json.content + "</p>";
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus, errorThrown);
}
});
}
function listHotspots() {
for(count = 0; count < counter; count++) {
(function(count) {
displayHotspot('scribble',hotspots[count], count);
count = count + 1;
})(count);
}
}
function loadHotspots() {
fetchHotspotList();
listHotspots();
}
$(document).ready(function() {
hsArea = $("#hotspotArea");
fetchHotspotList();
listHotspots();
});
(抱歉,格式设置有点过关!)-现在,$(document).ready()函数将hsArea变量分配为应有的值,但是fetchHotspotList()和listHotspots()的组合返回:
Uncaught TypeError: Cannot call method 'replace' of null
但是,如果在Google Chrome Javascript控制台中运行:
loadHotspots();
它从AJAX请求中获取数据,并在页面上正确显示。起初我以为问题是我没有使用$(document).ready()处理程序,但是添加它并没有解决它。两者都没有在body标签内部使用onload处理程序。
任何帮助将不胜感激。
问候,
本
最佳答案
可能是由于您的listHotSpots
函数在fetchHotSpots
返回之前被调用的缘故(因为它是异步调用)。
您最好将listHotSpots
的执行链接到fetchHotSpots
的完成,如下所示:
function fetchHotspotList() {
$.getJSON ('/alpha/engine/hotspots/gethotspot.php', {'type' : 'list'}, function(json) {
hotspots = json;
listHotSpots();
});
}
您最好将
listHotSpots
修改为采用从AJAX调用返回的json数据。希望这可以帮助!