单击按钮打开模式时禁用 location.reload()

Question

我有一个页面可以重新加载以更新数据库中的信息。 该页面将显示一个文件列表，其中包含有关每个文件的一些信息。 要显示有关文件的更多详细信息，用户可以单击该文件的按钮并打开包含更多信息的模式。

我的问题是重新加载 function 启动并关闭模式。 更新间隔需要为 10 秒，但是当模式打开时，我会禁用重新加载或将时间值更改为几分钟。 并且在模态关闭后，计时器应该 go 回到 10 秒。

           <script type="text/javascript">
         setTimeout(function(){
                location.reload();
                },5000)
        </script>

        <script type="text/javascript">
        $(document).ready(function(){
        $('.orderinfo').click(function(){
        var orderId = $(this).data('id');
        // AJAX request
        $.ajax({
        url: 'ajaxfile.php',
        type: 'post',
        data: {orderNo: orderId},
            success: function(response){ 
                // Add response in Modal body
                $('.modal-body').html(response);
                // Display Modal
                $('#empModal').modal('show'); 
                }
                });
            });
        });
        </script>

在 HTML 部分中，这将打开模态。

echo "<td style='width:15%'><button data-id='".$orderNo."' class='orderinfo'>Read report</button></td>";

我尝试了不同的方法，但找不到解决方法。 感谢任何帮助

谢谢

Answer 1

您可以使用 clearTimeout() 停止。

     var t = 0;

    function timer_pause(){
        clearTimeout(t);
        console.log('pause');
    }

    function timer_start(){
        t = setTimeout(function(){
                    location.reload();
                    },5000);
    }


    $(document).ready(function(){
        timer_start();
        $('.orderinfo').click(function(){
            timer_pause();
       });
    // use #modalid or whatever modal selector you have 
    // or if you have close function put resume in it
      $('.myModal').on('hidden.bs.modal', function () {
         timer_start();
      })

   })

这样，当您打开模式时，它会暂停计时器，当模式关闭时，它将重置它，您可以进行调整以继续使用之前的时间，

我不建议您经常重新加载页面，您可以重新加载内容，如果您正在显示表格，使用数据表，或者只是简单的 ajax。

Answer 2

谢谢艾哈迈德桑尼。

我几乎让它工作了。 它打开模态并停止计时器。 到目前为止，一切都很好。

但是我在关闭模式时没有启动计时器。 这是代码现在的样子。

<script>
        var t = 0;
        function timer_pause(){
            clearTimeout(t);
            console.log('pause');
        }

        function timer_start(){
            t = setTimeout(function(){
            location.reload();
            },5000);
        }

        $(document).ready(function(){
            timer_start();
            $('.orderinfo').click(function(){
                timer_pause();
                var orderId = $(this).data('id');
                // AJAX request
                $.ajax({
                url: 'ajaxfile.php',
                type: 'post',
                data: {orderNo: orderId},
                    success: function(response){ 
                        // Add response in Modal body
                        $('.modal-body').html(response);
                        // Display Modal
                        $('#empModal').modal('show'); 
                    }
                });

            // use #modalid or whatever modal selector you have 
            // or if you have close function put resume in it
            $('.orderInfo').on('hidden.bs.modal', function () {
                timer_start();
                })
            });                   
        })
        </script>

在 HTML 的关闭按钮中，我有这个：

<div class="modal-footer">
<button type="button" class="button" data-dismiss="modal">Close</button>
</div>

我想我这里没有连接。

你得原谅我以前没有用这种东西做过任何事情。 只是普通的 PHP、HTML 和 CSS

谢谢