Question

对 Javascript 还很陌生，我正在尝试做以下事情：我正在使用 Flask 应用程序，当我翻到一页时，它会显示来自我的 MySQL 数据库的不同信息。但与此同时，由于一个任务比另一个任务长，我让它在后台运行，允许在此任务完成之前显示页面。所以在我的页面上，我有一个按钮显示在禁用模式下，并显示一条消息，表明它将到达。所以我已经成功刷新了包含这个按钮的 div 部分，这意味着当后台任务结束时，按钮的模式会改变并变得可点击。

在 Javascript 方面，我使用 SetInterval 函数每 3 秒刷新一次 div，它会加载第二个页面，其中只有我想要的页面该部分的代码。

但我的观点是一旦按钮变为活动状态就能够停止刷新。我已经看到我们可以使用 ClearInterval 并查看是否出现 HTML 元素来做到这一点。但它不起作用，即使出现我的新按钮，刷新仍然继续。

这是我正在使用的代码：

page.html

$(document).ready(function() {
$('#myDiv').load("page2.html");
var interval;
interval = setInterval(function() {
    if (document.getElementById('mybutton') != null) {
        clearInterval(interval)
                    }
    else {
        $('#myDiv').load("page2.html");
        }
    },3000);
});
...........
<div id="myDiv"></div>

pag2.html

{% set results = task_id|values %}
{% if not results %}
<button type="button" class="btn disabled btn-light">Please wait</button>
{% else %}
<button id="mybutton" type="button" class="btn  btn-primary">Click</button>
{% endif %}

我有什么遗漏或做错了吗？

非常感谢

Answer 1

JQuery load() 函数有一个回调函数，加载完成后你可以在那里做任何你需要的事情。

$(document).ready(function() {     
    loadDiv();
    function loadDiv() {
        $('#myDiv').load("page2.html", loaded);     
    }      

    function loaded(response, status, codes) {         
        if(status === 'error') {             
            loadDiv();         
    }
});

JQuery：一旦出现元素，就停止使用 ClearInterval 刷新

1 个答案: