停止刷新 django 模板中的 js 文件答案

【问题标题】：stop refreshing js file in django templates停止刷新 django 模板中的 js 文件
【发布时间】：2020-09-08 23:01:38
【问题描述】：

我使用 Django 模板创建了倒数计时器，当 HTML 页面上的页面刷新数据是更新时，它会显示在 HTML 模板上，但它也会重置倒数计时器。我不希望有什么方法可以在不刷新的情况下停止刷新脚本或更新数据。

app.js

var count = 8
var counter = setInterval(timer , 1000)

function timer(){
    count = count-1
    if (count <= 0)
    {
        clearInterval(counter);

        return window.location.href = urlFromDjango
    }
    document.getElementById("timer").innerHTML= count + " secs";
}

index.html

{% load static %}
<head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="{% static 'css/app.css' %}">
    <script src="{% static 'js/app.js' %}"></script>
</head>
<script>
    var urlFromDjango = "{% url 'app:result' %}"
</script>

<body>
     <h1 id="timer"></h1>
</body>

<h1>{{user.username}}</h1><br>
<h2>score -{{user.userextend.score}}</h2>
<form action="{% url 'app:detail' quiz_id=que.quiz.id question_id=que.id %}" method="post">
     {% csrf_token %}
     {% for choice in que.answer_set.all %}
         <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
         <label for="choice{{ forloop.counter }}">{{ choice.answer }}</label><br>
     {% endfor %}
     <button><a href="{% url 'app:detail' %}">Next</a></button>
</form>

【问题讨论】：

标签： javascript django ajax django-rest-framework django-templates

【解决方案1】：

您需要将该信息存储在某处，因此即使您刷新计数信息也不会丢失。一个简单的解决方案是将其存储在某个地方，例如 cookie 或本地存储。这是一个例子：

var count = parseInt(localStorage.getItem("count-" + window.location.pathname)) || 8
var counter = setInterval(timer , 1000)

function timer(){
    count = count-1
    localStorage.setItem("count-" + window.location.pathname, count)
    if (count <= 0){  
        clearInterval(counter);
        return window.location.href = urlFromDjango
    }
    document.getElementById("timer").innerHTML= count + " secs"
}

【讨论】：

已更新！但它仍然没有存储剩余时间
嗯，你能在浏览器中检查你的本地存储，看看那里是否存储了任何东西吗？另外，能否请您查看控制台是否有任何错误？
更新上述代码后，没有显示任何计时器，而是直接重定向到结果页面
我的错。我忘了使用 localStorage，它会返回字符串而不是 int。您需要将其显式类型转换为整数。我已经更新了答案。