Javascript Internet Explorer的同步性问题

我正在使用UWA小部件格式开发一个javascript小部件。不幸的是，这使得我的代码无法进行JSFIDLE，但我已经对其进行了详细的注释，希望您能够遵循它相当简单的顺序

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

HighestClass={}；
HighestClass.array=[]；
HighestClass.url=”http://our.url.local/frog/pointsByWeek.php?cmd=highestClass&students=";
HighestClass.init=函数（groupPrefix）{
var计数=0；
/*使用下拉框中的组前缀，即“CLS 9”，
获取当年组中所有课程的列表*/
/*第一轮，计算与此匹配的组数
语法，因为没有可用于筛选的参数
此API*/
Frog.API.get（'groups.getAll'{
“onSuccess”：函数（数据）{
对于（变量i=0；i0）{
list=list.slice（0，-1）；
/*运行对PHP脚本的AJAX调用，该脚本只返回一个整数
该学生名单获得的奖励积分总和的值*/
UWA.Data.getJson（HighestClass.url+list，函数（res）{
如果（res==false | | res===“”）res=0；
/*将此数据推送到类名旁边的对象数组中*/
var obj={“name”：name，“points”：res}；
高级类.数组.推送（obj）；
});
}
/*由于此函数被异步调用多次，我们需要
确定最后一次调用何时运行，以便处理阵列
我们之所以能做到这一点，是因为在前面的
在此函数中触发end=true的函数*/
如果（结束===真）
HighestClass.display（）；
}
HighestClass.display=函数（）{
/*一旦我们将对象数组放在一起，我们需要对其进行排序，以便
点数最多的类位于数组项0处*/
功能比较（a、b）{
如果（a点b点）
返回-1；
返回0；
}
/*如果我在这里放一个警报，INTERNET EXPLORER可以工作，哈哈*/
HighestClass.array.sort（比较）；
/*然后我们可以显示数组条目0的数据，它应该是我们的最高值
记分班*/
$（'#display'）.html（''+HighestClass.array[0].name+''+HighestClass.array[0].points+''）；
}
/*相当于文件就绪*/
widget.onLoad=函数（）{
/*从下拉框中选择年份组*/
$（“选择”）.change（函数（）{
var val=$（'select option:selected'）.val（）；
$（“#display”）.html（'Loading…'）；
最高类初始值（val）；
});
}

从本质上讲，脚本执行以下操作：

检索每个班级的学生列表

对我们的PHP脚本/MySQL数据库运行AJAX调用，以返回这些学生的总分

将名称和点信息添加到对象数组中

对对象数组进行排序，使得分最高的类成为我们的第一个数组条目

显示类的名称及其在数组项0中的点

问题是，我能想到的唯一方法（因为API的限制）是运行异步API调用并将AJAX调用链接到这些调用上。然后，我使用一个计数变量来确定最后一个异步调用是在什么时候进行的

现在，重要的是，这个脚本在FireFox中运行得非常好。然而，在Internet Explorer中，我需要它来工作，这个脚本显示我们的“加载”DIV/图像，不再进一步

奇怪的是，如果我在代码中添加了

警报

（我用大写字母对其进行了注释），Internet Explorer就可以正常工作

这一定是一个同步性和时间性的问题，但我没有这方面的经验或知识

有人能提出一个解决方案吗？如果有必要，Hacky可以

干杯，

警报“修复”了问题这一事实表明这与时间问题有关。看起来您的某个函数没有及时返回，也没有正确填充数组变量

尝试将count和end变量设置为全局变量，看看是否有帮助。我认为这与作用域有关。

警报“修复”问题的事实确实表明这与时间问题有关。看起来您的函数之一没有及时返回，也没有正确填充数组变量

试着数一数

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

Frog.API.get("users.search", {
    "params": {
        "group": id
    },
    "onSuccess": function (data){
        for (var i = 0; i < data.length; i++)
            list += data[i].id + ",";
    }
});

 if( typeof list === "string" && list.length > 0 ) {

if( end === true )
    HighestClass.display();

HighestClass.array.push(obj);

HighestClass = {};
HighestClass.array = [];
HighestClass.url = "http://our.url.local/frog/pointsByWeek.php?cmd=highestClass&students=";

HighestClass.init = function(groupPrefix) {

    /* 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 */

    Frog.API.get('groups.getAll',{
        'onSuccess': function(data){
        var i = 0,
            l = 0,
            count = 0,
            group = [];
        /* First time round, count the number of groups that match this
            syntax because there are no parameters available to filter
            this API */
        for (i = 0, l = data.length; i < l; i++) {
            if (data[i].name.indexOf(groupPrefix) != -1)
                group.push(data[i]);
        }

        /* Now that these classes have been counted, run through the API
        call again to push each class ID through to another function */
        l = group.length;
        count = l - 1;
        for (i = 0; i < l; i++) {
            // i == count will be true when it is the last one
            HighestClass.getClassPoints( group[i].name, group[i].id, i == count);
        }
    });


}

HighestClass.getClassPoints = function(name, id, end) {

    /* 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){
            var list = '';
            // We have data and build our string
            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 */
    if (HighestClass.array.length > 0)
        $('#display').html( '<h1>' + HighestClass.array[0].name + '</h1><h3>' + HighestClass.array[0].points + '</h3>' );
    else
        $('#display').html( '<h1>No data available</h1>' );
}

/* 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>');

        try {
            HighestClass.init(val);
        } catch (e) {
            $("#display").html('<h1>Sorry, an error occured while retrieving data</h1>');
        }
    });
}