1
我正在开发一个使用UWA小部件格式的javascript小部件。不幸的是，这使得不可能让js弄糟我的代码，但我已经详细地评论了它，希望你可以遵循它的相当简单的顺序。Internet Explorer的同步问题
HighestClass = {};
HighestClass.array = [];
HighestClass.url = "http://our.url.local/frog/pointsByWeek.php?cmd=highestClass&students=";
HighestClass.init = function(groupPrefix) {
var count = 0;
/* Using the group prefix, i.e. "CLS 9", from the drop-down box,
get a list of all of the classes in that year group */
/* First time round, count the number of groups that match this
syntax because there are no parameters available to filter
this API */
Frog.API.get('groups.getAll',{
'onSuccess': function(data){
for (var i = 0; i < data.length; i++) {
if (data[i].name.indexOf(groupPrefix) != -1)
count++;
}
});
/* Now that these classes have been counted, run through the API
call again to push each class ID through to another function */
var run_through = 0;
Frog.API.get('groups.getAll',{
'onSuccess': function(data){
for (var i = 0; i < data.length; i++) {
if (data[i].name.indexOf(groupPrefix) != -1) {
var end = false;
run_through++;
/* When it gets to the last class group, i.e. the run_through
variable becomes equal to count, let the getClassPoints
function know */
if(run_through == count)
end = true;
HighestClass.getClassPoints(data[i].name, data[i].id, end);
}
}
}
});
}
HighestClass.getClassPoints = function(name, id, end) {
var list = '';
/* Using the ID of the class group, create a comma-separated list
of students for use in our MySQL query */
Frog.API.get("users.search", {
"params": {
"group": id
},
"onSuccess": function (data){
for (var i = 0; i < data.length; i++)
list += data[i].id + ",";
}
});
/* If the list exists... */
if(typeof list === "string" && list.length > 0) {
list = list.slice(0,-1);
/* Run an AJAX call to our PHP script which simply returns an integer
value of the SUM of reward points earned by that list of students */
UWA.Data.getJson(HighestClass.url + list, function(res){
if (res === false || res === "") res = 0;
/* Push this data into an array of objects alongside the class name */
var obj = { "name": name, "points": res };
HighestClass.array.push(obj);
});
}
/* As this function is being called asynchronously multiple times we need to
determine when the last call is run so that we can deal with our array
of data. We do this thanks to the count/run_through variables in earlier
function which will trigger end=true in this function */
if(end === true)
HighestClass.display();
}
HighestClass.display = function() {
/* Once we've put our array of objects together, we need to sort it so that
the class with the highest number of points are at array entry 0 */
function compare(a,b) {
if (a.points < b.points)
return 1;
if (a.points > b.points)
return -1;
return 0;
}
/* IF I PUT AN ALERT HERE, INTERNET EXPLORER WORKS, LOL? */
HighestClass.array.sort(compare);
/* We can then display the data of array entry 0 which should be our highest
point-scoring class */
$('#display').html('<h1>' + HighestClass.array[0].name + '</h1><h3>' + HighestClass.array[0].points + '</h3>');
}
/* equivalent of document ready */
widget.onLoad = function(){
/* Choose the year group from the drop down box */
$("select").change(function(){
var val = $('select option:selected').val();
$("#display").html('<h1><img width="60" height="60" src="http://logd.tw.rpi.edu/files/loading.gif" />Loading...</h1>');
HighestClass.init(val);
});
}
本质的脚本执行以下操作：
- 检索的学生名单为每个类组
- 运行一个AJAX调用我们的PHP脚本/ MySQL数据库返回点的SUM对于这些学生
- 将名称和分数信息添加到对象数组
- 对对象数组进行排序，以便最高得分分数类是我们的第一个数组输入
- 显示类的名称，并从阵列进入他们的积分0
的问题是，我可以考虑一下这样做（因为这些API的限制）的唯一方法是运行异步API调用和连锁AJAX呼吁这些。然后我使用计数变量来确定最后一次异步调用的时间。
现在，重要的是，这个脚本在FireFox中工作得很好。但是，在Internet Explorer中 - 这是我需要它工作的地方 - 脚本显示我们的“加载”DIV /图像，并且不再进一步。
奇怪的是，如果我在代码中填入alert（我用大写字母评论它），Internet Explorer将正常工作。
这必须是一个同步性和时机问题，但我没有经验或知识。
任何人都可以提出解决方案吗？如果有必要，Hacky很好。
干杯，