2

jQueryで非同期リクエストをオフにすると、問題が修正されました。

私のページには次のJavascriptとAJAXリクエスト（jQueryを使用）があります：

    "use strict";

    var hsArea, counter, hotspots, count;
    counter = 4;
    count = 0;
    hotspots = {};

    function fetchHotspotList() {
        $.getJSON ('/alpha/engine/hotspots/gethotspot.php', {'type' : 'list'}, function(json) {
            hotspots = json;
        });
    }

    function displayHotspot(type, id, number) {
        $.ajax({
            url: '/alpha/engine/hotspots/gethotspot.php',
            dataType: 'json',
            data: {'type' : type, 'id' : id},
            success: function(json) {
                console.log(json);
                var hotspot, extract;
                    extract = json.content;
                    extract = extract.replace(/<(?:.|\n)*?>/gm, '');
                    extract = extract.substring(0, 97);
                    extract = extract + "...";
                    json.content = extract;

                    hotspot = document.createElement("div");
                    hsArea.append(hotspot);
                    hotspot.setAttribute('class','hotspot');
                    hotspot.setAttribute('id','hotspot' + number);

                    $(hotspot).css('position', 'absolute');
                    $(hotspot).css('top', number * 100 + 100);
                    $(hotspot).css('left', number * 100 + 110);

                    hotspot.innerHTML = "<h1>"+ json.title + "</h1><p>" + json.content + "</p>";
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus, errorThrown);
            }
        });
        }

        function listHotspots() {
            for(count = 0; count < counter; count++) {
                (function(count) {
                    displayHotspot('scribble',hotspots[count], count);
                    count = count + 1;  
                })(count);
            }
        }

        function loadHotspots() {
            fetchHotspotList();
            listHotspots();
        }

    $(document).ready(function() {
        hsArea = $("#hotspotArea");
        fetchHotspotList();
        listHotspots();
    });

（フォーマットが少しずれているのでごめんなさい！）-$（document）.ready（）関数はhsArea変数を適切に割り当てますが、fetchHotspotList（）とlistHotspots（）の組み合わせは次を返します。

Uncaught TypeError: Cannot call method 'replace' of null

ただし、Google Chrome Javascriptコンソールで、次のコマンドを実行します。

loadHotspots();

AJAXリクエストからデータをフェッチし、ページに適切に表示します。最初は、$（document）.ready（）ハンドラーを使用していなかったことが問題だと思いましたが、追加しても修正されませんでした。bodyタグ内でonloadハンドラーを使用することもありません。

どんな助けでも大歓迎です。

よろしく、ベン。

4

1 に答える 1

1

listHotSpotsこれはおそらく、関数が戻る前に呼び出されるという事実が原因ですfetchHotSpots（非同期呼び出しであるため）。

次のように、の実行をlistHotSpots完了までチェーンする方がよいでしょう。fetchHotSpots

function fetchHotspotList() {
    $.getJSON ('/alpha/engine/hotspots/gethotspot.php', {'type' : 'list'}, function(json) {
        hotspots = json;
        listHotSpots();
    });
}

listHotSpotsAJAX呼び出しから返されたjsonデータを取得するように変更する方がよい場合があります。お役に立てれば！

于 2012-09-29T10:47:48.270 に答える