1

我在索引页上显示 Google 地图时遇到问题。这是我目前正在尝试的方式：

  1. 使用GoogleMapApiV3 PHP 类 ( http://pastebin.com/LCb3mP7f )
  2. 使用以下方法在 PHP 文件 (loadMap.php) 中生成我的地图：

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

3 - 使用 AJAX 获取地图的脚本（基本上是什么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 手动刷新索引页面时显示。然后它在 5 秒后消失（我猜这是因为setInterval()）

我怎样才能解决这个问题？这样做的最佳方法是什么？

这整件事让我发疯了，提前感谢任何帮助！

halpsb.

4

1 回答 1

1

这让你发疯，你是对的。 

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

您没有强制要求任何序列，只是同时触发 3 个 ajax 调用。

所以事情变得混乱了。

因为您正在异步接收相互依赖的数据，并且在每个接收点您都假设您已经准备好所有数据集，这不是......

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

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

下面，我根据您的需要对您的代码进行两个示例修改：

如果您首先需要数据，然后是新闻，然后是地图，请这样做

伪代码：

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();
 }

如果您首先需要新闻，然后是地图，然后是数据，请这样做

伪代码：

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();
 }

我希望这足够清楚，可以帮助你。

于 2013-04-20T23:38:55.590 回答