Python/Flask/JS - 显示等待屏幕并在等待 5 秒后继续

Question

我是 Flask 的超级新手，我正在尝试使用 Flask 在 python 中构建一个小应用程序......

我想显示一个等待屏幕，然后在 5 秒后，继续到下一页。 问题是，我不知道在没有按钮的情况下我应该把这个“动作”放在哪里..正如我现在拥有的那样，我编写的python代码似乎没有效果..

我的代码如下：

我有一个waiting_screen.html ：

{% block header %}

<head>
<!-- standard stuff -->
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">

<style>
  
  #loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  }

  @-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
  }
  /* Add animation to "page content" */
  .animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
  }
  @-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
  }
  @keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
  }
  #myDiv {
  display: none;
  text-align: center;
  }
</style>

<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/basic.css"> -->


</head>


<div class="header-with-image" style="width: 100%; background-color:white; height: 70px; color: white;padding:0px;">
      <img class='banner-image' src="{{ url_for('static', filename='images/logo_header.jpg') }}" style="display: block;
      margin-left: auto;
      margin-right: auto;
      width: 8%;
      margin-bottom:<y>px;">
</div>
<div class="row justify-content-center align-items-center" style="width: 100%;
    box-shadow: 0 4px 2px -2px rgba(0,0,0,.2);
    height:100px;
    background-color:#2c3350;
    margin-top:<x>px;
    text-align: center;">
    <h1>Consolidatie Tool</h1>
</div>
<div class='row head valign-wrapper' >
    <div class='col s8 rellax center-align' data-rellax-speed="-2">
        <br>
        <br>
    </div>
</div>

{% endblock %}


{% block content %}
<div style="padding: 2%;font-family: Verdana; margin:15px; text-align: center;margin-left: auto;height: 40%;
margin-right: auto;background: #ffffff;border-radius:4px;border-color:red;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);width:30%;" >
    <form action="/first-page-info-check" method="POST">

    </form>
    <h4 style="text-align:center"> Bezig om documenten te verwerken... </h4>
    <br>
    <head>
        <div id="loader" action="/first-page-info-check"></div>
        <div style="display:none;" id="myDiv" class="animate-bottom" action="/first-page-info-check">
            <h2>Tada!</h2>
            <p>Some text in my newly loaded page..</p>
        </div >
        <script>
        var myVar;
        function myFunction() {
        myVar = setTimeout(showPage, 3000);
        }

        function showPage() {
        document.getElementById("loader").style.display = "none";
        document.getElementById("myDiv").style.display = "block";
        }
        </script>
    </head>

</div>


{% endblock %}

下一页在 url /first-page-info-check 处称为confirm_upload.html ，我有以下烧瓶/python 代码：

@app.route('/first-page-info-check',methods=['POST', 'GET'])
def waiting():
    time.sleep(5)
    return render_template('confirm_upload.html')

我知道我在代码中的多个位置放置了action="/first-page-info-check" ，这不应该这样做，但我只是不明白何时应该如何放置动作没有表格。。

希望可以有人帮帮我：）

Answer 1

JavaScript 超时将在处理函数之前等待给定的时间。 为了避免阻塞其他组件的执行，超时被封装在一个 Promise 中。 当 Promise 在 5000 毫秒后得到解决时，用户将被重定向到您的第二个页面。 从技术上讲，您可以直接调用它，但我决定在DOMContentLoaded上调用该函数，以免在加载所有内容之前启动超时。

function waitForMe() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, 5000);
    });
}

document.addEventListener("DOMContentLoaded", function(event) {
    waitForMe().then(() => {
        window.location.href = "/first-page-info-check";
    });
});

Python/Flask/JS - 显示等待屏幕并在等待 5 秒后继续

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-09-24 23:15:14

Python/Flask/JS - 显示等待屏幕并在等待 5 秒后继续

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-09-24 23:15:14

解决方案1
0 已采纳 2020-09-24 23:15:14