Question

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

class App extends Component {

  state = {
    showInput: false,
    addTaskInput: '',
    addItem:'',
    todoList: [],
  }

  showAddTask = (e) => {
    this.setState({showInput: true})
  }

  saveInput = (e) => {
    this.setState({addTaskInput: e.target.value})
  }

  populateTaskList = (e) => {
    const actualList = this.state.todoList;
    actualList.push(e.target.value);
    this.setState({addItem: e.target.value, todoList:actualList })
  }

  render() {
    const {showInput, addTaskInput, addItem, todoList} = this.state;
    return (
      <div className="app">
        <Button
          message="Add Task"
          bsStyle="primary"
          onClick={this.showAddTask}
        />
        { showInput && <input
          type="text"
          placeholder="Add Task here..."
          value={addTaskInput}
          onChange={this.saveInput}
          onBlur={this.populateTaskList}
        /> }
        <TodoList
          todoList={todoList}
        />
      </div>
    );
  }
}

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

 $(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>

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

我正在使用ASP.MVC 5 btw。

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

在显示模态后停止触发settimeout

2 个答案: