英文:
Delay an automatic reload if a div is visible
问题
我尝试创建一个小项目来跟踪飞越我的地区的飞行。使用python包来访问flight-radar24 API，我成功获取了所需的数据。
我创建了一个systemd服务，以便每隔x秒启动我的python脚本。该脚本输出一个名为"data.html"的HTML文件。每架飞机都输出两个div：一个可见，包含一些信息，一个不可见，包含更详细的信息。
项目的第二部分是显示检索到的数据。我按照以下步骤进行：
- 简单的网页（index.html）
- CSS文件
- 一个时钟（JavaScript，用于显示时间）位于index.html的“header”部分
- jQuery（本地下载并使用）
- 一个重新加载的JavaScript（从data.html中获取并打印到index.html的“datadiv”中）
- 一个“弹出”管理器，这样您可以在单击飞机时看到带有附加信息的漂亮div。
我的问题是，当“弹出”可见时，我无法停止自动重新加载机制。如果在1或2秒内单击一架飞机，您来不及阅读。
我尝试在单击函数中使用"clearInterval/clearTimeout"，但没有成功。
我尝试了以下方法：
- 合并一些js文件，以考虑可能存在的变量范围问题。
- 在index.html中创建"弹出" div，并保持其为空，然后使用jQuery更改内容，以便在加载data.html之前该div已经存在。
- 使用setTimeout而不是setInterval。
- 还有很多我记不起来的事情...
弹出代码（每架飞机（"trigger"）都有自己的div ID以及附加信息（eXYZ））：
$(function() {
$('.trigger').click(function(e) {
$('.plane_info').hide();
$('div#e'+this.id).show();
});
$('.trigger').mouseleave(function(e) {
$('div#e'+this.id).hide();
});
});
重新加载代码：
function setupRefresh()
{
setInterval("refreshBlock();",5000);
}
function refreshBlock()
{
$('#datadiv').load("../data.html");
}
setupRefresh();
希望这有所帮助。
英文:
I tried to create a small project to track flying over my area.
Using python package for flight-radar24 API, I successfully got the needed data.
I've created systemd service to launch my python script every x seconds. This script output a html file named "data.html".
Each plane output two div: One visible with few information, one invisible with more detailed information.
Second part of the project is to show the retrieved data. I proceed as follow:
- 1/ simple webpage (index.html)
- 2/ CSS file
- 3/ A clock (JavaScript, just to show the time) on the "header" part of index.html
- 4/ jQuery (to use jQuery, locally downloaded)
- 5/ A reloading JavaScript (fetch and print data.html into the "datadiv" of index.html)
- 6/ A "popup" manager, so you can see a nice div with additional information while clicking on a plane.
My problem is that I failed at stopping the auto-reloading mechanism when the "popup" is visible. If you click on a plane while the reloading is scheduled in 1 or 2 seconds, you don't have time to read.
I tried using "clearInterval/clearTimeout" in the click function without any success.
I tried the following:
- Merging some js file, thinking I could have a variable scope issue.
- Creating the "popup" div in index.html and keeping it empty, then just change the content using jQuery so this div exists before the data.html is loaded.
- Using setTimeout instead of setInterval.
- And to many thing I can't remember...
The popup code (each plane ("trigger") got it's own div ID with additional information (eXYZ)):
$(function() {
$('.trigger').click(function(e) {
$('.plane_info').hide();
$('div#e'+this.id).show();
});
$('.trigger').mouseleave(function(e) {
$('div#e'+this.id).hide();
});
});
The reloading code:
function setupRefresh()
{
setInterval("refreshBlock();",5000);
}
function refreshBlock()
{
$('#datadiv').load("../data.html");
}
setupRefresh();
答案1
得分: 1
你忽略了代码部分，其中你尝试使用clearInterval的部分...但鉴于你没有捕获setInterval的返回值，我可以猜到出了什么问题：
要使用clearInterval，你需要在设置间隔时捕获间隔ID，这样浏览器才知道要清除哪个间隔。
let foo = setInterval(refreshBlock, 5000); // 当你想要开始刷新时
// ...
clearInterval(foo); // 当你想要停止刷新时
英文:
You omitted the part of the code where you tried using clearInterval... but given that you aren't capturing the return value of setInterval, I can guess what went wrong:
In order to use clearInterval you need to capture the interval ID when setting the interval, so the browser can know which one to clear.
let foo = setInterval(refreshBlock,5000); // when you want to start refreshing
// ...
clearInterval(foo); // when you want to stop refreshing
答案2
得分: 0
啊，我看到您的项目面临一个有趣的挑战！为了解决“弹出窗口”可见时阻止自动重新加载的问题，您可以通过修改重新加载代码，添加一个条件来检查弹出窗口当前是否可见，然后再触发重新加载。让我们进行必要的调整：
<!DOCTYPE html>
<html>
<head>
<title>Flight Radar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<!-- 在这里显示时钟 -->
</div>
<div id="datadiv">
<!-- 从data.html加载的数据将显示在这里 -->
</div>
<script src="jquery.js"></script>
<script>
$(function() {
$('.trigger').click(function(e) {
$('.plane_info').hide();
$('div#e' + this.id).show();
stopAutoReload();
});
$('.trigger').mouseleave(function(e) {
$('div#e' + this.id).hide();
restartAutoReload();
});
function setupRefresh() {
intervalID = setInterval(refreshBlock, 5000);
}
function refreshBlock() {
if ($('.plane_info').is(":hidden")) {
$('#datadiv').load("../data.html");
}
}
function stopAutoReload() {
clearInterval(intervalID);
}
function restartAutoReload() {
setupRefresh();
}
var intervalID; // 用于存储间隔ID的变量
setupRefresh(); // 初始时开始自动重新加载
});
</script>
</body>
</html>
英文:
Ah, I see you're facing an interesting challenge with your project! To address the issue of preventing automatic reloading when the "popup" is visible, you can modify the reloading code by adding a condition to check if the popup is currently visible before triggering the reload. Let's make the necessary adjustments:
<!DOCTYPE html>
<html>
<head>
<title>Flight Radar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<!-- Clock display here -->
</div>
<div id="datadiv">
<!-- Data from data.html will be loaded here -->
</div>
<script src="jquery.js"></script>
<script>
$(function() {
$('.trigger').click(function(e) {
$('.plane_info').hide();
$('div#e' + this.id).show();
stopAutoReload();
});
$('.trigger').mouseleave(function(e) {
$('div#e' + this.id).hide();
restartAutoReload();
});
function setupRefresh() {
intervalID = setInterval(refreshBlock, 5000);
}
function refreshBlock() {
if ($('.plane_info').is(":hidden")) {
$('#datadiv').load("../data.html");
}
}
function stopAutoReload() {
clearInterval(intervalID);
}
function restartAutoReload() {
setupRefresh();
}
var intervalID; // Variable to store the interval ID
setupRefresh(); // Start the automatic reloading initially
});
</script>
</body>
</html>
答案3
得分: 0
让我们尝试一种简单的方法：
- 有一个名为
isVisible的变量，用于跟踪弹出窗口是否可见 - 当弹出窗口不可见时，有条件地运行
refreshBlock
let isVisible = false;
function togglePopup(toggle) {
if (toggle) {
$(".content").show();
isVisible = true;
} else {
$(".content").hide();
isVisible = false;
}
}
let counter = 0;
function refreshBlock() {
if (!isVisible) {
console.log("Reloading...", ++counter);
}
// 或者，您可以放弃`isVisible`变量，直接检查弹出窗口元素是否可见：
/*
if ($(".content").is(":hidden")) {
console.log("Reloading...", ++counter);
}
*/
}
setInterval(refreshBlock, 1000);
.content {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
background-color: #e8eae6;
padding: 10px;
z-index: 100;
display: none;
}
.close-btn {
position: absolute;
right: 20px;
top: 15px;
background-color: black;
color: white;
padding: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="togglePopup(true)">显示弹出窗口</button>
<div class="content">
<div onclick="togglePopup(false)" class="close-btn">
×
</div>
<h3>弹出窗口</h3>
</div>
英文:
Let's try a simple approach:
- Have a variable called
isVisiblethat tracks whether the popup is visible or not - Conditionally run
refreshBlockif the popup is not visible
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let isVisible = false;
function togglePopup( toggle ) {
if ( toggle ){
$(".content").show();
isVisible = true;
} else {
$(".content").hide();
isVisible = false;
}
}
let counter = 0;
function refreshBlock(){
if ( !isVisible ){
console.log("Reloading...", ++counter);
}
// Alternatively, you can discard the isVisible variable, and just check
// whether the popup element is visible or not:
/*
if ( $(".content").is(":hidden") ){
console.log("Reloading...", ++counter);
}
*/
}
setInterval(refreshBlock, 1000);
<!-- language: lang-css -->
.content {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
background-color: #e8eae6;
padding: 10px;
z-index: 100;
display: none;
}
.close-btn {
position: absolute;
right: 20px;
top: 15px;
background-color: black;
color: white;
padding: 4px;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="togglePopup(true)">show popup</button>
<div class="content">
<div onclick="togglePopup(false)" class="close-btn">
×
</div>
<h3>Popup</h3>
</div>
<!-- end snippet -->
答案4
得分: 0
已完成！我还有一些CSS问题要解决（摆脱使用“
”作为填充以扩展“hideall”按钮的不干净方法），但混合答案给了我一个可以工作的东西。
我添加了一个超时，所以弹出窗口在几秒钟后自动关闭，单击弹出窗口以外的区域和航班列表也会关闭它。这部分有点混乱，使用了航班列表顶部和底部的两个按钮来实现。一个更清洁的解决方案本应该是单击除了弹出窗口区域以外的任何地方（即使在显示弹出窗口时单击航班列表也会重新显示新的弹出窗口，所以并不算真正混乱）。
非常感谢你们三个！
以下是您提供的HTML和JavaScript代码，没有翻译：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Flight Radar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button class="trigger_close" onclick="hideall()">
<div class="heading" id="clock"/>
<script src="js/jquery-3.7.0.min.js"></script>
<script src="js/clock.js"></script>
</div>
<br/>
<div class="table_headings">
<table>
<tr>
<td width="280" style="text-align: center">CALLSIGN</td>
<td width="200" style="text-align: center"> FROM</td>
<td width="250" style="text-align: center"> TO</td>
<td width="250" style="text-align: center"> ALT</td>
</tr>
</table>
</div><br/><br/></button>
<div id="datadiv">
<!-- Data from data.html will be loaded here -->
</div>
<div class="plane_info" id="master"></div>
<script>
function hideall(){
if ($('div#master').is(":visible")) {
restartAutoReload();
}}
function showplanedetails(flight_callsign,flight_number,ticket_aircraft,ticket_airline,ticket_country_ori_full,ticket_city_ori,ticket_country_dest_full,ticket_city_dest) {
$('div#master').hide();
clearTimeout(timeoutID);
$('div#master').html("<table class='ticket_table'>" +
"<div class='plane_info_header'>"+ flight_callsign + " <img src='img/departingflights2.png' width='35' height='35' /> " + flight_number +"</div>"+
"<div class='plane_info_content'>Aicraft: " + ticket_aircraft + "</div><br>"+
"<div class='plane_info_content'>Airline: " + ticket_airline +"</div><br>"+
"<div class='plane_info_content'>From: " + ticket_country_ori_full + " - " + ticket_city_ori + " </div><br>"+
"<div class='plane_info_content'>Dest: " + ticket_country_dest_full + " - " + ticket_city_dest +"</div>");
$('div#master').show();
stopAutoReload();
}
function setupRefresh() {
intervalID = setInterval(refreshBlock, 5000);
}
function refreshBlock() {
if ($('div#master').is(":hidden")) {
$('#datadiv').load("data.html");
}
}
function stopAutoReload() {
clearInterval(intervalID);
timeoutID = setTimeout(restartAutoReload, 5000);
}
function restartAutoReload() {
$('div#master').hide();
setupRefresh();
}
var intervalID; // Variable to store the interval ID
var timeoutID; // Variable to store the interval ID
setupRefresh(); // Start the automatic reloading initially
</script>
<button class="trigger_close" onclick="hideall()">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</button>
</body>
</html>
<!-- end snippet -->
Python脚本生成的“data.html”现在输出如下按钮：
html += f'<button class="trigger" onclick="showplanedetails(\'{flight_callsign}\',\'{flight_number}\',\'{ticket_aircraft}\',\'{ticket_airline}\',\'{ticket_country_ori_full}\',\'{ticket_city_ori}\',\'{ticket_country_dest_full}\',\'{ticket_city_dest}\')">'
将来某一天会尝试为这个项目创建一个Git存储库。
英文:
Done! I still have a few css think to fix (getting ride of dirty "<br/>" used as padding to expand "hideall" buttons), but mixing the answers gave me something working.
I added a timeout so the popup close itself after a few seconds, and clicking out of a the popup and the flight list also close it. This part is dirty, done by using two buttons on top and bottom of flights list. A cleaner solution would have been clicking anywhere but the popup area (even if, clicking on flight list while popup is shown brings back the new popup, so that's not really dirty...)
Many thanks to the three if you!
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Flight Radar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button class="trigger_close" onclick="hideall()">
<div class="heading" id="clock"/>
<script src="js/jquery-3.7.0.min.js"></script>
<script src="js/clock.js"></script>
</div>
<br/>
<div class="table_headings">
<table>
<tr>
<td width="280" style="text-align: center">CALLSIGN</td>
<td width="200" style="text-align: center">&nbsp;FROM</td>
<td width="250" style="text-align: center">&nbsp;&nbsp;&nbsp;&nbsp;TO</td>
<td width="250" style="text-align: center">&nbsp;&nbsp;&nbsp;&nbsp;ALT</td>
</tr>
</table>
</div><br/><br/></button>
<div id="datadiv">
<!-- Data from data.html will be loaded here -->
</div>
<div class="plane_info" id="master"></div>
<script>
function hideall(){
if ($('div#master').is(":visible")) {
restartAutoReload();
}}
function showplanedetails(flight_callsign,flight_number,ticket_aircraft,ticket_airline,ticket_country_ori_full,ticket_city_ori,ticket_country_dest_full,ticket_city_dest) {
$('div#master').hide();
clearTimeout(timeoutID);
$('div#master').html("<table class='ticket_table'><div class='plane_info_header'>"+ flight_callsign + " <img src='img/departingflights2.png' width='35' height='35' /> " + flight_number +"</div>"+
"<div class='plane_info_content'>Aicraft: " + ticket_aircraft + "</div><br>"+
"<div class='plane_info_content'>Airline: " + ticket_airline +"</div><br>"+
"<div class='plane_info_content'>From: " + ticket_country_ori_full + " - " + ticket_city_ori + " </div><br>"+
"<div class='plane_info_content'>Dest: " + ticket_country_dest_full + " - " + ticket_city_dest +"</div>");
$('div#master').show();
stopAutoReload();
}
function setupRefresh() {
intervalID = setInterval(refreshBlock, 5000);
}
function refreshBlock() {
if ($('div#master').is(":hidden")) {
$('#datadiv').load("data.html");
}
}
function stopAutoReload() {
clearInterval(intervalID);
timeoutID = setTimeout(restartAutoReload, 5000);
}
function restartAutoReload() {
$('div#master').hide();
setupRefresh();
}
var intervalID; // Variable to store the interval ID
var timeoutID; // Variable to store the interval ID
setupRefresh(); // Start the automatic reloading initially
</script>
<button class="trigger_close" onclick="hideall()">
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
</button>
</body>
</html>
<!-- end snippet -->
The python script generating "data.html" now outputs buttons such as:
html += f'<button class="trigger" onclick="showplanedetails(\'{flight_callsign}\',\'{flight_number}\',\'{ticket_aircraft}\',\'{ticket_airline}\',\'{ticket_country_ori_full}\',\'{ticket_city_ori}\',\'{ticket_country_dest_full}\',\'{ticket_city_dest}\')">'
Will try someday to create a git repository for this project.
Main Flight Board
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论