Веб-игра Ajax, продолжайте перезагружать карту, не привинчивая другие страницы

#php #ajax #reload

#php #ajax #перезагрузите

Вопрос:

Я создаю веб-игру, и ее интерфейс очень прост, состоит из:

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

Случается, что в div с id = «map» отображается моя карта, но также и другие разделы игры отображаются слишком низко в инвентаре.
Я использую jQuery для работы с ajax, поэтому это выглядит так:

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

Приведенный выше код загружает div в первый раз, затем, когда я нажимаю кнопку направления, он снова вызывает эту функцию с некоторыми параметрами, чтобы игрок мог двигаться, но вот проблема, я бы хотел, чтобы карта перезагружалась, пока я на ней.

Я попытался выполнить:

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

и на самом деле это сработало, но когда я нажал кнопку, которая изменила div и не была картой (как инвентарь), она быстро показывает экран инвентаря и снова меняется на карту.

Конечно, это меняется, потому что он продолжает вызывать карту! итак, я подумал и попытался поместить этот «setInterval» в Map.php таким образом, он вызывался бы только при отображении его на экране, но это тоже не сработало, он сделал то же самое, что и при первой попытке.
Я думаю, что я что-то упускаю, кто-нибудь может мне помочь?
Заранее спасибо

Комментарии:

1. Совет 1: Выберите передачу функций в setInterval . Совет 2: Вам не нужно продолжать использовать $(document).ready : setInterval(function () { $("#map").load("map.php"); }, 1000);

Ответ №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 классе. Пока она есть в map div, она будет постоянно обновляться. Когда вы открываете инвентарь, этот класс удаляется, поэтому карта не обновляется.

Надеюсь, это поможет.