Question

我正在创建一个程序，使用AJAX / JSON从服务器获取数据，然后使用该数据绘制到画布上（html5）。我有一个函数，在调用时，进行一些初始化然后调用这个函数：

function getClimateData(climateElement) {
    $.ajax(
    {
        type: "GET",
        contentType: "application/json; charset=utf-8",
        url: "/Climate/yearInformation" + climateElement,
        data: "{}",
        dataType: "json",
        success: function (data) {
            weatherData = data;
        },
        error: function (xhr, err) {
            // Note: just for debugging purposes!
            alert("readyState: " + xhr.readyState +
                    "\nstatus: " + xhr.status);
            alert("responseText: " + xhr.responseText);
        }
    }
    )
};

问题是在所有数据到达之前，调用函数会继续并根据数据（不存在）在画布上绘制一些内容。这有时只会发生。

如何在继续执行之前确保数据已到达？

Answer 1

做好工作......

    success: function (data) {
        weatherData = data;
        // <------------------ HERE! 
    },

...而不是在调用函数中。

这就是拥有回调函数的重点。

Answer 2

将基于数据绘制的代码移动到成功函数中的单独函数调用 - 或者只是将代码直接放在success函数中。

...
success: function (data) { 
  // use data to do your drawing
},
...

Answer 3

理论上可以使用async: false将请求置于同步模式，但这通常是个坏主意。

处理此问题的最佳方法是更改脚本的结构，以便在成功回调中发生依赖于请求的所有内容（或从那里调用）。

Answer 4

您应该将绘图功能放在成功回调中。这样，只有在数据到达时才会触发绘图功能。

在继续执行之前，如何使用JSON等待ajax获取数据？

4 个答案: