Ajax WebGame，不断重新加载地图而不破坏其他页面

Question

我正在制作一个网页游戏，它的界面非常简单，由以下部分组成：

<div>logo</div>
<div id="map"></div>
<div>some buttons here</div>

碰巧的是，id =“map”的div是我的地图出现的地方，但游戏的其他部分也看起来太像库存了。 我使用 jQuery 来做 ajax 的事情，所以它是这样的：

$(document).ready(function() {$('#map').load('map.php');});

上面的代码第一次加载 div，然后当我单击方向按钮时，它会再次调用带有一些参数的函数，以便玩家可以移动，但这是问题，我想在我使用地图时保持地图重新加载。
我尝试做一个：

setInterval("$(document).ready(function() {$('#mapadiv').load('map.php');});",1000);

事实上它确实有效，但是当我单击一个更改 div 的按钮而不是地图（如库存）时，它会快速显示库存屏幕并再次更改为地图。
当然它会改变，因为它一直在调用地图！所以我想并尝试将“setInterval”放入Map.php中，这样它只会在屏幕上时调用，但这也不起作用，它与第一次尝试的效果相同。 我想我错过了一些东西，有人可以帮助我吗？ 提前致谢

Answer 1

我假设您也有这个按钮：

   <input type="button" id="btnInventory" />
   <input type="button" id="btnRefreshMap" />

您的脚本应该是这样的：

function loadMap(){
  $('#map').load('map.php');
  $("#map").addClass("keepRefreshingMap");  //This will do the trick
}
function loadInventory(){
  $("#map").load("inventory.php"); //Put your loading inventory code here
  $("#map").removeClass("keepRefreshingMap");  //Remove the class so it doesn't refresh automatically
}
$(document).ready(function() {
   loadMap();
   $("#btnRefreshMap").click(function(){ loadMap(); });
   $("#btnInventory").click(function(){ loadInventory() });
   setInterval(function(){
      if($("#map").hasClass("keepRefreshingMap"))  //Only refresh if it has the class
          loadMap();
   }, 1000);

});

正如您所看到的，技巧就在 keepRefreshingMap 类中。只要地图div有它，就会不断刷新。当您打开清单时，此类将被删除，因此地图不会刷新。

希望这有帮助。