Опрос MySQL и исчезающие элементы в out - PullRequest
Новая
       7

Опрос MySQL и исчезающие элементы в out

1 голос
/ 15 июня 2011

Код ниже работает просто отлично, делает именно то, что говорит на банке. Это просто не очень хорошо.

В проекте задействованы ведущая и подчиненная системы. Один представляет собой карту большого экрана, другой - маленький сенсорный экран с множеством кнопок. Пользователь может включать и выключать слои карты (прозрачные PNG), нажимая кнопки. Я использую очень крошечную базу данных MySQL в качестве посредника, кнопки на странице управления устанавливают запись в 1 или 0, а страница карты опрашивает базу данных каждые 100 миллисекунд (или что-то еще) и ищет изменения. Обе страницы запускаются с одного сервера (одна система просто действует как тупой терминал)

Это все работает как шарм, но затухающая анимация не работает хорошо. Если я постоянно переключаю кнопку, слой исчезает и исчезает ... иногда. В большинстве случаев слой просто появляется и исчезает, но в том же интервале, что и анимация. Слои карты - это полупрозрачные поля, которые уменьшают легенду в зависимости от того, какой слой показан или нет (просто так вы знаете)

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

var layerChange = setInterval(function() {
    $.ajax({
        type: 'GET',
        url: '/php/db-get-layers.php',
        dataType: 'json',
        success: function(data) {
          $.each(data, function(key, value) {
                if (value == 0) {
                    $('#legend-' + key).fadeOut(400);
                    $('#map-layers #' + key).fadeIn(400);
                } else {
                    $('#legend-' + key).fadeIn(400);
                    $('#map-layers #' + key).fadeOut(400);
                 }
            });
        },
    });
}, 100);

Вот файл php 

<?php 
include('../config/config.php');
include('../config/db.php');

$provinces = $_GET['layer'];

$selectQuery = "SELECT oil, naturalgas, hydro, wind, coal, nuclear, tidal, thermal, solar FROM layers";
$query = mysql_query($selectQuery) or die(mysql_error());
$output = mysql_fetch_array($query, MYSQL_ASSOC);
echo json_encode($output);
?>

Заранее спасибо за любую помощь.

Обновление: соответствующий HTML-код для страницы карты 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Map of Canada</title>
    <link rel="stylesheet" href="/styles/reset.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/styles/structure-map.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/styles/maps.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/styles/fonts.css" type="text/css" media="screen" />
    <script src="scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="scripts/kiosk-map.js" type="text/javascript"></script>
</head>
<body>
<!-- Page Container -->
<div id="site-wrapper">
    <section id="map-layers">
        <div id="basemap" class="canada"></div>
        <div id="oil" class="canada"></div>
        <div id="naturalgas" class="canada"></div>
        <div id="rivers" class="canada"></div>
        <div id="hydro" class="canada"></div>
        <div id="wind" class="canada"></div>
        <div id="coal" class="canada"></div>
        <div id="nuclear" class="canada"></div>
        <div id="tidal" class="canada"></div>
        <div id="thermal" class="canada"></div>
        <div id="solar" class="canada"></div>
        <div id="labels" class="canada"></div>
    </section>
    <section id="map-legend">
        <div id="legend"></div>
        <div id="legend-oil" class="legend-overlay"></div>
        <div id="legend-naturalgas" class="legend-overlay"></div>
        <div id="legend-hydro" class="legend-overlay"></div>
        <div id="legend-wind" class="legend-overlay"></div>
        <div id="legend-coal" class="legend-overlay"></div>
        <div id="legend-nuclear" class="legend-overlay"></div>
        <div id="legend-tidal" class="legend-overlay"></div>
        <div id="legend-thermal" class="legend-overlay"></div>
        <div id="legend-solar" class="legend-overlay"></div>
    </section>
<!-- End Page Container  -->
</div>
</body>
</html>

Файл kiosk-map.js содержит код JS, включенный выше - только этот код, ничего больше.

Ответы [ 2 ]

1 голос
/ 15 июня 2011

У вас есть дубликаты идентификаторов в вашем HTML, что недопустимо.Попробуйте превратить это 

<section id="map-layers">
    <div id="basemap" class="canada"></div>
    <div id="oil" class="canada"></div>

в это 

<section id="map-layers">
    <div class="basemap canada"></div>
    <div class="oil canada"></div>

и т.д ...

Затем попробуйте это: 

$('#map-layers .' + key).stop().fadeIn(400);

и так далее, ии так далее с другим селектором.

0 голосов
/ 15 июня 2011

Чтобы избежать опроса, вы можете посмотреть что-то вроде библиотеки Socket.IO для node.js. За последние несколько лет появилось много новых решений для обновлений в реальном времени, которые передаются с сервера на браузер. Возможно, вы захотите задать еще один вопрос, касающийся только вопроса об опросе, или выполнить поиск по сайту существующих ответов.

...