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

Posted

技术标签:

【中文标题】停止刷新 django 模板中的 js 文件【英文标题】:stop refreshing js file in django templates 【发布时间】: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>

【问题讨论】:

【参考方案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。您需要将其显式类型转换为整数。我已经更新了答案。

以上是关于停止刷新 django 模板中的 js 文件的主要内容,如果未能解决你的问题,请参考以下文章

django - 使用间隔的 AJAX 调用刷新模板中的 JSON 数据

Django不会刷新静态文件

如何使用Django模板在javascript中访问ajax jquery中的模板变量

在更新 mysqlDatabase 内容时刷新 django 模板中的表内容

仅使用新项目(Django)刷新模板中的表格内容

带有 css/js 的 Django“包含”模板