如果引导模式处于活动状态或显示，如何停止每秒刷新的页面？

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

有多种方法可以确定模态是打开还是关闭，一种选择是挂钩到bootstrap模态的事件：

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

show.bs.modal

调用show实例方法时会立即触发此事件。如果由单击引起，则单击的元素可用作事件的relatedTarget属性。

hide.bs.modal

调用hide实例方法时会立即触发此事件。

添加到现有代码：

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);
    }
}