php - 如果引导模式处于事件状态或正在显示，如何停止每秒刷新一次的页面？

Question

我有两个 php 页面，第一页是我使用 Ajax 显示来自 MySQL 数据库的数据，每 1 秒刷新一次，第二页包含从数据库获取数据的 php 代码，其中我有一个引导模式显示每条记录的其他信息。

第一个 php 页面:

<div class = "container">
   <div id = "show_MySql_table_data"></div>
</div>

<script>
//Ajax script for displaying the record every 1 second
 var interval = 1000;
 function displayData() {
   $.ajax ({
    url: "details_info.php",
    type: "POST",
    data: {},
    dataType: "html",
    success: function(data) {
        $("#show_MySql_table_data").html(data);
    },
    complete: function (data) {
        setTimeout(displayData, interval);
    }       
   });
  }
   setTimeout(displayData, interval);
  </script>

第二个 php 页面:

<?php
$cn = mysqli_connect("localhost","root","","testdb");
$sql = "SELECT * FROM tblsample";
$result = mysqli_query($cn,$sql);
if (mysqli_num_rows($result) > 0 ) {
    while($rows = mysqli_fetch_array($result)) {
        $name = $rows['Name'];
        $address = $rows['Address'];
        echo "<tr>";
        echo "<td>" . $name . "</td>";
        echo "<td>" . $address . "</td>";
        echo "<td><button class = 'toggleDetailsModal btn btn-info'>More Info</button></td>";
        echo "</tr>";
    }
}
?>

<!-- Modal -->
<div class = "modal" id = "detailsModal">
<div class = "modal-dialog">
    <div class = "modal-content">
        <div class = "modal-header">
            <h5 class = "modal-title">Details</h5>
            <button class = "close" data-dismiss = "modal">&times;</button>
        </div>
        <div class = "modal-body">
            More Information here....
        </div>
        <div class = "modal-footer">
            <button class = "btn btn-danger btn-sm" data-dismiss = "modal">Close</button>
        </div>
    </div>
</div>

<script> //this is included in the second php page
$(".toggleDetailsModal").on("click", function(e) {
   e.preventDefault();
   $("#detailsModal").modal('show');
});
</script>

发生的情况是，当我单击“更多信息”按钮时，模式会自动关闭，并且我的屏幕会变灰。

当我单击“更多信息”按钮并且模态框处于事件状态或处于显示模式时，如何停止自动刷新页面(每 1 秒)？

提前谢谢您。

Answer 1

有多种方法可以确定模式是打开还是关闭，一种选择是 Hook Bootstrap 模式的事件:

https://getbootstrap.com/docs/4.0/components/modal/#events

show.bs.modal

This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

hide.bs.modal

This event is fired immediately when the hide instance method has been called.

添加到现有代码:

var modalActive = false;
$("#detailsModal").on("show.bs.modal", function() {
    modalActive = true;
});
$("#detailsModal").on("hide.bs.modal", function() {
    modalActive = false;
});

function displayData() {
    if (!modalActive) {
        $.ajax ...
    } else {
        setTimeout(displayData, interval);
    }
}