jQuery用done更新值，失败

jQuery to update values with done, fail

本文关键字：失败更新 done jQuery 更新时间：2023-09-26

jQuery更新done, fail

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的值

您的匿名函数在任何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/