Flask 倒计时计时器

Question

Flask 倒计时计时器

6

我正在使用Flask构建一个游戏，每一轮都有倒计时时间来完成这一轮。我希望时间值每秒钟减少1，并且无需重新加载页面即可更新。倒计时本身使用time.sleep在设置生成器的下一个值之前等待1秒钟，然后将该值作为全局变量通过jsonify传递到HTML中。但是它没有起作用。任何帮助将不胜感激！

Python：

def countdownGen(t):
    return (t-i for i in range(t))

def countdown(t):
    gen = countdownGen(t)
    while t > 0:
        try:
            globaltimer = next(gen)
            time.sleep(1)
        except StopIteration:
            globaltimer = 0

@app.route('/_timer', methods=['GET'])
def timer():
    global globaltimer
    globaltimer = 60
    countdown(globaltimer)
    return jsonify(result=globaltimer)

HTML / JS:

<script type="text/javascript">
  var intervalID = setInterval(update_values,1000);
  $SCRIPT_ROOT = {{request.script_root|tojson|safe}};
  function update_values() {
    $.getJSON($SCRIPT_ROOT + '/_timer',
    function(data) {
      $('#result').text(data.result);
    });
  };
</script>

<body onload="update_values();">
  <span id="result">?</span>
<script>
document.getElementById("result").innerHTML;
</script>
</body>

- rmd_po

你尝试过将 setInterval 行移动到声明 update_values() 之后吗？ - Bruno Monteiro

@BrunoMonteiro，这似乎也不起作用。 - rmd_po

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 5eb · Accepted Answer

您可以像这样做：

您可以采取如下方式：

from flask import Flask, render_template, jsonify

app = Flask(__name__)


class Timer:
    def __init__(self, current_time):
        self.current_time = current_time

    def decrement(self):
        if self.current_time > 0:
            self.current_time = self.current_time - 1
        return self.current_time


t = Timer(current_time=60)


@app.route("/", methods=["GET"])
def index():
    return render_template("index.html")


@app.route("/_timer", methods=["GET", "POST"])
def timer():
    new_time = t.decrement()
    return jsonify({"result": new_time})


if __name__ == "__main__":
    app.run()

还有这个：

<body>
   <span id="result"></span>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script>window.jQuery || document.write('<script src="{{ url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
   <script type="text/javascript">
      const root_url = {{request.root_url|tojson|safe}};
      const intervalID = setInterval(update_values, 1000);
      function update_values() {
        $.getJSON(
          root_url + "_timer",
          data => {
            $("#result").text(data.result);
            if (data.result == 0) {
              clearInterval(intervalID);
            }
          }
        )
      }
   </script>
</body>

当我调用request.script_root时，我得到了一个空字符串，导致请求失败，所以这也可能是你端口的问题。我改用request.root_url。请注意，request.root_url带有尾随斜杠，因此在尝试调用其中的端点时需要注意。

这里的想法是创建一个类，在该类的实例中可以传递一个初始时间，该时间会被递减并返回。

在您的代码中，您同时使用setInterval(update_values, 1000)和time.sleep(1)。我删除了time.sleep(1)调用，因为我们已经每秒钟只调用一次_timer端点，所以不需要等待额外的一秒钟。

我仅在时间大于0时才递减时间。在模板中，如果data.result（即从Flask接收到的时间）为0，则不再递减并清除间隔。

还要注意，由于我们根据setInterval递减时间，因此诸如刷新之类的操作不会重置计时器。这可能是期望的行为，但无论如何都需要记住这一点。