我已经用 Django 模板创建了倒数计时器，当页面刷新 HTML 页面上的数据是更新时，它会显示在 HTML 模板上，但它也会重置倒数计时器。我不希望有任何方法可以在不刷新的情况下停止刷新脚本或更新数据。
应用.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";
}
索引.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>
您需要将该信息存储在某处，因此即使您刷新计数信息也不会丢失。一个简单的解决方案是将其存储在 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"
}