0

HTML5 キャンバスに図形を描画しようとしています。これらの形状は、データベースのステータスに依存します。図形のステータスを返す Web サービスにアクセスします。その部分は機能します。しかし、get の関数部分で形状変数を使用しようとすると、形状変数が最後のステータスによって上書きされます。

get 呼び出しなしで図形を描画しようとしましたが、うまくいきました。誰かが私が間違っていることを教えてもらえますか?

for (var i = 0; i < map_json.shapes.length; i++) {
            var shape = map_json.shapes[i];//variable

            if (!(force && i == active_btn_index) || (i == selected_btn_index)) {
                drawShape(
                    shape.c,
                    map_btns_context,
                    (i == active_btn_index || i == selected_btn_index) ? options_active : options
                );

                if (shape.lotNo != undefined && shape.tc != undefined) {
                    $.getJSON(site_url + "DesktopModules/DNN.WebAPI/API/Ajax/GetStatus?lotNo=" + shape.lotNo,
                        function (data, success) {
                            console.log(shape);
                            //my shape.tc is always overwritten by the last returned data item 
                            map_btns_context.drawImage(map_type_img[data.status], shape.tc[0] - 12, shape.tc[1] - 12);
                        }
                    );
                    //map_btns_context.drawImage(map_type_img[shape.t], shape.tc[0] - 12, shape.tc[1] - 12);
                }
            }

            body += '<area shape="poly" coords="' + shape.c.toString() + '" onmouseover="updateButtons(' + i + ')" />';//title="Shape ' + (i+1) + '" />';
        }
4

1 に答える 1

1

これは、ループ内で AJAX を非同期的に実行しているために発生していると思います。AJAX が応答を返すまでに、実行はさらに進み、形状変数を最後の項目で上書きします。AJAX を同期的にヒットさせてみてください。

AJAX 部分を削除すると、スクリプトは同期的に実行され、Shape 変数は常に現在の値を取得します。

于 2013-09-27T12:40:26.543 に答える