jquery 如果div可见，则延迟自动重新加载

k10s72fa  于 2023-08-04  发布在  jQuery
关注(0)|答案(4)|浏览(103)

我试图创建一个小项目来跟踪飞越我的区域。使用flight-radar 24 API的python包，我成功地获得了所需的数据。
我已经创建了systemd服务来每隔x秒启动我的python脚本。此脚本输出一个名为“data.html”的html文件。每个平面输出两个div：一个是可见的，信息很少，一个是不可见的，信息更详细。
项目的第二部分是显示检索到的数据。我继续如下：

  • 1/简单网页（index.html）
  • 2/ CSS文件
  • 3/index.html的“header”部分的时钟（JavaScript，只是显示时间）
  • 4/ jQuery（要使用jQuery，本地下载）
  • 5/ A重新加载JavaScript（获取并打印data.html到index.html的“datadiv”中）
  • 6/一个“弹出”管理器，这样你就可以在点击一个平面的同时看到一个带有附加信息的漂亮的div。

我的问题是，我未能停止自动重装机制时，“弹出”可见。如果你点击一个飞机，而重新加载是在1或2秒，你没有时间阅读。
我尝试在click函数中使用“clearInterval/clearTimeout”，但没有成功。
我尝试了以下方法：

  • 合并一些js文件，我想我可能有一个变量范围的问题。
  • 在index.html中创建“popup”div并将其保持为空，然后只需使用jQuery更改内容，以便在加载data.html之前存在此div。
  • 使用setTimeout代替setInterval。
  • 对于很多我记不起来的事情...

弹出代码（每个平面（“触发器”）都有自己的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();

型

jquery

4条答案

按热度按时间
v2g6jxz6

v2g6jxz61#

啊，我看到你的项目正面临着一个有趣的挑战！要解决当“弹出窗口”可见时阻止自动重新加载的问题，您可以通过添加一个条件来修改重新加载代码，以在触发重新加载之前检查弹出窗口当前是否可见。让我们进行必要的调整：

<!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>

字符串

赞(0）分享  回复(0）举报  2023-08-04
5jdjgkvh

5jdjgkvh2#

您省略了尝试使用clearInterval的代码部分…但是考虑到你没有捕获setInterval的返回值，我可以猜出哪里出错了：
为了使用clearInterval，您需要在设置间隔时捕获间隔ID，以便浏览器可以知道要清除哪一个。

let foo = setInterval(refreshBlock,5000); // when you want to start refreshing

// ...

clearInterval(foo); // when you want to stop refreshing

字符串

赞(0）分享  回复(0）举报  2023-08-04
mccptt67

mccptt673#

让我们尝试一个简单的方法：

  • 有一个名为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);
  }
  // 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);
.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)">show popup</button>
    <div class="content">
        <div onclick="togglePopup(false)" class="close-btn">
            ×
        </div>
        <h3>Popup</h3>
    </div>
赞(0）分享  回复(0）举报  2023-08-04
2ul0zpep

2ul0zpep4#

完成了！我还有一些css想修复（得到骑的脏“
”用作填充来扩展“hideall”按钮），但混合答案给了我一些工作。
我添加了一个超时，这样弹出窗口会在几秒钟后自动关闭，点击弹出窗口和航班列表也会关闭它。这部分是脏的，通过使用两个按钮上的顶部和底部的航班列表。一个更干净的解决方案是点击任何地方，但弹出区域（即使，点击航班列表，而弹出显示带回新的弹出窗口，所以这不是真的脏…）
非常感谢三个如果你！

<!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>

字符串
生成“data.html”的python脚本现在输出如下按钮：

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仓库。Main Flight Board
Flight Details的

赞(0）分享  回复(0）举报  2023-08-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com