Question

使用done更新值的jQuery，失败

Javascript，jQuery异步和范围事情让我发疯。

输出是：

3rd: 5 5 5 5 
1st 1: 5 5 5 5
1st 2: 9 36 284 340
2nd 9 36 284 340 
1st 1: 9 36 284 340
1st 2: 10 37 284 340
2nd 10 37 284 340 
...

我想要的只是输出：

1st 2: 10 37 284 340
2nd 10 37 284 340 
3rd: 10 37 284 340
...

以便我可以传递更新的值：

代码如下：

series: [{
    data: (
        function() {

            y1 = 5,
            y2 = 5,
            y3 = 5,
            y4 = 5;

            function myFunction() {
                return $.ajax({
                    type: "GET",
                    url: "/getTest",
                    success: function(data) {
                        console.log("1st 1:", y1, y2, y3, y4);
                        y1 = data.V1;
                        y2 = data.V2;
                        y3 = data.V3;
                        y4 = data.V4;
                        console.log("1st 2:", y1, y2, y3, y4);
                    }
                });
            };

            var data = [],
                time = (new Date()).getTime(),
                i;
            for (i = -60; i <= 0; i++) {
                myFunction().done(function() {
                    console.log("2nd", y1, y2, y3, y4);
                }).fail(function() {
                    console.log("Fail");
                });
                console.log("3rd:", y1, y2, y3, y4);
                data.push({
                    x: time + i * 30,
                    y: 0
                });
            }
            return data;
        }()
    )
}],

问题是console.log("3rd:"~),先运行，因此没有更新。我该怎么做才能从HighChart中的GET返回值。

Answer 1

您的匿名函数在任何AJAX调用返回之前返回数组。您需要设置图表，然后进行数据调用并在返回时设置系列的值。类似的东西：

var chart = $('#container').highcharts({
    series: [{
        data: (

        function () {

            //We'll initialize an array of zeroes to set your series up
            var initialData = [];
                //This will eventually be populated with our data
            var ajaxData = [];
            //References to all our requests we'll make
            var ajaxRequests = [];

            y1 = 5,
            y2 = 5,
            y3 = 5,
            y4 = 5;

            function myFunction(x) {
                return $.ajax({
                    type: "GET",
                    url: "/getTest",
                    success: function (data) {
                        console.log("1st 1:", y1, y2, y3, y4);
                        y1 = data.V1;
                        y2 = data.V2;
                        y3 = data.V3;
                        y4 = data.V4;
                        console.log("1st 2:", y1, y2, y3, y4);
                        //Add the returned data to our array in the correct position
                        ajaxData.push({
                            x: x,
                            y: y1
                        });
                    }
                });
            };

            var time = (new Date()).getTime(),
                i;

            for (i = -60; i <= 0; i++) {
                //Push this initial node
                var x = time + i * 30;
                initialData.push({
                    x: x,
                    y: 0
                });
                //Fire off our ajax request, passing in the x value
                ajaxRequests.push(myFunction(x));
            }

            //Create a "master" request that will only be complete when all the ajax is done
            //When all requests are done, load the data into the chart
            //"apply" passes our array as arguments, i.e. function.apply($, [1, 2, 3]) === $.function(1,2,3)
            $.when.apply($, ajaxRequests).then(function() {
                console.log('Done getting ' + ajaxData.length + ' points');
                //Update the data of the first series in the chart
                chart.series[0].setData(ajaxData);
            });

            //Remember, this is dummy data...
            return initialData;
        }())
    }] //...
});

http://jsfiddle.net/2s2bf69c/3/

jQuery用done完成更新值，失败

1 个答案: