显示模态后停止触发 settimeout

Question

我有一个页面，10 秒后重新加载以显示新记录，我使用简单的 settimeout 函数来完成此操作：

 $(document).ready(function () {
var timeout = setTimeout(function () {
            location.reload();
        }, 10000);
        timeout();
});

数据表中的每条记录都有一个按钮，用于显示包含详细信息的模式：

<div class="panel-body">
        <div class="dataTable_wrapper">

            <table class="table table-striped table-bordered table-hover" id="exemplo">
                <thead>
                    <tr>
                        <th>Visualizar</th>
                        <th>Matrícula Responsável</th>                        
                        <th>Data Solicitação</th>     
                        <th>Status</th>                   
                    </tr>
                </thead>
                <tbody>

                    @if (Model != null)
                    {
                        foreach (VivoMais.Repositorio.Entidades.Solicitacao solicitacao in Model.Solicitacoes)
                        {
                            <tr class="odd gradeX">
                                <td><input type="image" src="~/Imagens/Icones/Look.ico" onclick="clearTimeout(timeout);Visualizar('@solicitacao.Id', event);" data-toggle="modal" data-target="#myModal" style="margin-left: 30%;" width="28" height="28"></td>
                                <td>@solicitacao.Boleta.Venda.MatriculaConsultor</td>
                                <th>@solicitacao.DataSolicitacao</th>
                                <td>@solicitacao.Status</td>
                            </tr>
                        }
                    }
                </tbody>
            </table>
        </div>
    </div>

模式会显示，但父页面仍会重新加载。我尝试像这样清除点击事件的超时：

<td><input type="image" src="~/Imagens/Icones/Look.ico" onclick="clearTimeout(timeout);Visualizar('@solicitacao.Id', event);" data-toggle="modal" data-target="#myModal" style="margin-left: 30%;" width="28" height="28"></td>

如何在显示模式时阻止父页面重新加载？

我正在使用 ASP.NET MVC 5 顺便说一句。

Answer 1

在函数外部设置一个标志并检查状态

const modalState = 'hidden'

$(document).ready(function () {
var timeout = setTimeout(function () {
        if (modalState === 'hidden') {
         location.reload();
        } else {
          modalState = 'shown'
        }
    }, 10000);
    timeout();
});

Answer 2

我认为你应该使用“modalViewFlag”和简单的 if ... else。

喜欢：

$(document).ready(function () {

var modalViewFlag = false;

$('#modal-content').on('shown', function() {
    modalViewFlag = true;
})

var timeout = setTimeout(function () {

            if(modalViewFlag == false) {
                location.reload();
            }

        }, 10000);
        timeout();
});