php - (Ajax + PHP)我的 Google map 消失了

Question

我在索引页上显示 Google map 时遇到问题。 这是我目前正在尝试的方法:

1. 使用 GoogleMapApiV3 PHP 类 ( http://pastebin.com/LCb3mP7f )
2. 使用以下命令在 PHP 文件 (loadMap.php) 中生成我的 map :

$gmap->generate(); echo $gmap->getGoogleMap();

3 - 使用 AJAX 获取 map 脚本(基本上是 echo 中的内容)，然后使用 eval() 执行它。

这是我的 refresh.js 页面的内容:

$(document).ready(function() {
    // show map and news
    refreshGUI();
});

// Update every 5 seconds
setInterval('refreshData()', 5000);
setInterval('refreshGUI()', 5000);

function refreshData() {
    $.post('index.php?js=refresh');
}
;

// Refreshes the page elements
function refreshGUI() {
    refreshNews();
    refreshMap();
} 

function refreshNews() {
    $.post('index.php?js=lastNews&lim=3', function(data) {
        var s = '';
        data = data.childNodes.item(0);
        for (var i = 0; i <= data.childNodes.length; i++) {
            data2 = data.childNodes.item(i);
            s += ('<div>' + data2.childNodes.item(1).textContent + '</div>');
            $('#newspane #news').html(s);
        }
        $('#newspane #news').html($('#newspane #news').html() + s);
    });
}

function refreshMap() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var myDiv = document.getElementById('map');
            myDiv.innerHTML = xmlhttp.responseText;

            var myScripts = myDiv.getElementsByTagName("script");
            if (myScripts.length > 0) {
                eval(myScripts[0].innerHTML);
            }
        }
    }
    // js=loadMap is my loadMap.php file, where I echo the map's script.
    xmlhttp.open("GET", "index.php?js=loadMap", true);
    xmlhttp.send();
}

我的问题:仅当我使用 CTRL+F5 手动刷新索引页时， map 才会显示。然后它会在 5 秒后消失(我猜这是因为 setInterval())

我该如何解决这个问题？最好的方法是什么？

这整件事让我发疯，提前感谢您的任何帮助!

halpsb。

Answer 1

这让你发疯，你是对的。

setInterval('refreshData()', 5000);
setInterval('refreshGUI()', 5000);

您没有强制执行任何顺序，只是同时触发 3 个 ajax 调用。

所以事情变得困惑了。

因为您正在异步接收相互依赖的数据，并且在每个接收点，您假设您手中已准备好所有数据集，但事实并非如此......

这里 setTimeout 比 setInterval 更好，因为:setInterval 将每 5 秒启动一次，但 setTimeout 将在每次工作完成时启动一次并等待 5 秒，这将使您的脚本适应服务器响应时间。

请注意，我不知道 jQuery 调用，因此您最好找出正确的语法。

下面，我根据您的需要给出两个代码修改示例:

如果您首先需要数据，然后是新闻，然后是 map ，就这样做

伪代码:

start the sequence directly with a refreshData for first render

                           send refreshData 
when async receive occurs  send refreshNews
when async receive occurs  send refreshMap
when async receive occurs  render output
after render complete      setTimeout('refreshData',5000);

代码:

$(document).ready(function() {
    refreshData(); 
});


function refreshData() {
    $.post('index.php?js=refresh',
            refreshNews); // that is the part I am not so sure
}                           // I am jQuery illiterate sorry..

function refreshNews() {
    $.post('index.php?js=lastNews&lim=3', function(data) {
        var s = '';
        data = data.childNodes.item(0);
        for (var i = 0; i <= data.childNodes.length; i++) {
            data2 = data.childNodes.item(i);
            s += ('<div>' + data2.childNodes.item(1).textContent + '</div>');
            $('#newspane #news').html(s);
        }
        $('#newspane #news').html($('#newspane #news').html() + s);
    //---------------------------------------
        refreshMap();  // here add this
    //---------------------------------------
   });
}

function refreshMap() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var myDiv = document.getElementById('map');
            myDiv.innerHTML = xmlhttp.responseText;

            var myScripts = myDiv.getElementsByTagName("script");
            if (myScripts.length > 0) {
                eval(myScripts[0].innerHTML);
            }
        }
    //--------------------------------
    setTimeout(refreshData, 5000); // restart sequence in 5 seconds
    //--------------------------------
    }
    // js=loadMap is my loadMap.php file, where I echo the map's script.
    xmlhttp.open("GET", "index.php?js=loadMap", true);
    xmlhttp.send();
 } 

如果您首先需要新闻，然后是 map ，然后是数据，请像这样进行

伪代码:

start the sequence directly with a refreshNews for first render

                           send refreshNews
when async receive occurs  send refreshMap
when async receive occurs  send refreshData
when async receive occurs  render output
after render complete      setTimeout('refreshNews',5000);

代码:

$(document).ready(function() {
    refreshNews(); 
});


function refreshData() {
    $.post('index.php?js=refresh',
        function(){
            setTimeout(refreshNews, 5000); // restart sequence in 5
        }
    ); // that is the part I am not so sure
}      // I am jQuery illiterate sorry..

function refreshNews() {
    $.post('index.php?js=lastNews&lim=3', function(data) {
        var s = '';
        data = data.childNodes.item(0);
        for (var i = 0; i <= data.childNodes.length; i++) {
            data2 = data.childNodes.item(i);
            s += ('<div>' + data2.childNodes.item(1).textContent + '</div>');
            $('#newspane #news').html(s);
        }
        $('#newspane #news').html($('#newspane #news').html() + s);
    //---------------------------------------
        refreshMap();  // here add this
    //---------------------------------------
   });
}

function refreshMap() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var myDiv = document.getElementById('map');
            myDiv.innerHTML = xmlhttp.responseText;

            var myScripts = myDiv.getElementsByTagName("script");
            if (myScripts.length > 0) {
                eval(myScripts[0].innerHTML);
            }
        }
    //--------------------------------
        refreshData(); // here add this
    //--------------------------------
    }
    // js=loadMap is my loadMap.php file, where I echo the map's script.
    xmlhttp.open("GET", "index.php?js=loadMap", true);
    xmlhttp.send();
 } 

我希望这足以帮助您。