Остановите время срабатывания после появления модального

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>

Модальное отображение, но родительская страница все еще перезагружается. Я попытался очистить тайм-аут события click следующим образом:

<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.MVC 5, кстати.

Answer 1

Я думаю, вы должны использовать 'modalViewFlag' и просто, если ... еще.

Как:

$(document).ready(function () {

var modalViewFlag = false;

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

var timeout = setTimeout(function () {

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

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

Answer 2

Установите флажок вне функции и проверьте статус

const modalState = 'hidden'

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