轮询 MySQL 和淡入淡出元素
Posted
技术标签:
【中文标题】轮询 MySQL 和淡入淡出元素【英文标题】：Polling MySQL and fading elements in a out 【发布时间】：2011-06-15 16:29:53 【问题描述】：下面的代码运行良好，完全符合它在锡上的说明。它只是做得不太好。
该项目涉及主从系统。一个是大屏幕地图，另一个是带有很多按钮的小触摸屏。用户可以通过按下按钮打开和关闭地图图层（透明 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 代码——只有那个代码，没有别的。
【问题讨论】：
什么版本的浏览器正在显示淡入/淡出失败的地图图像？ 我正在使用 Safari（以及 Plainview - 仍然是 webkit），并且从一开始褪色就失败了。如果我真的快速设置和取消设置图层（尽可能快地按下按钮），那么淡入淡出往往会起作用（有时再次）。如果我在按钮之间等待一两秒钟，则按下淡入淡出失败。我不知道为什么。 你能发布 HTML（或者至少是相关部分吗？）。根据您提供的代码，我看不出有任何原因无法正常工作。如果您发布您的 HTML，我可以在我的服务器上试用它，看看会发生什么。 【参考方案1】：您的 HTML 中有重复的 ID，这是无效的。试试转这个
<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);
以此类推，以此类推与另一个选择器。
【讨论】：
感谢您的关注。我把“legend-”放在了 id 前面——这样我只需要对 CSS 和 JS 做些小改动。不能解决问题，但至少我知道它没有导致问题。我有一种下沉的感觉，它是 webkit - Firefox 似乎工作正常...... 然后使用$('#legend-' + key).fadeOut(400);而不是以祖先后代的方式使用两个id，只使用id要快得多。另外，您是否尝试在fadeIn() 或fadeOut() 之前添加.stop()？
检查$('#legend-' + key).fadeOut(400);（当我注意到我可以这样做时是否这样做）我现在还没有系统，所以我无法测试.stop()，但是什么时候会我明天再说。
看起来（出于所有意图和目的）这是 Webkit 中的一个错误。 Firefox、IE、Camino 和 Chrome 似乎都可以正常工作。谢谢您的帮助。我会接受这个答案，因为它发现了我的编码错误。【参考方案2】：
为避免轮询，您可以查看类似 Socket.IO 的 node.js 库。在过去几年中，出现了许多新的解决方案，用于从服务器流式传输到浏览器的实时更新。您可能想问另一个关于投票问题的问题，或者在网站上搜索现有答案。
【讨论】：
由于您使用的是 PHP，您可能需要查看这个 SO 问题：***.com/questions/603201/using-comet-with-php以上是关于轮询 MySQL 和淡入淡出元素的主要内容，如果未能解决你的问题，请参考以下文章