时间戳

首页 > 解决方案 > innerHTML 在 javascript 加载跨度后读取跨度标签

javascript - innerHTML 在 javascript 加载跨度后读取跨度标签

问题描述

背景：

我在后端使用 Django；在我的模板中，我使用的是 html、jinja2 和 javascript（加载了 jQuery）。

目标：

我希望 javascript 每隔一秒（左右）检查一下页面的某个部分是否有更新，如果有，则更新另一部分。

相关html

<p>Last action taken: <span id="actionTime">{{ last_action_time.isoformat }}</span></p>

last_action_time 是从视图中传入的，作为最后一次在数据库中更新“action_log”。据我所知，它工作正常。

相关的javascript：

$(function () {
    function refresh_action_log(){
        var url_actions = document.URL + ' #action_log'
        $('#action_log').load(url_actions);
    }
    function update_action_time() {
        var url_action_time = document.URL + ' #actionTime';
        $('#actionTime').load(url_action_time, function () {
            // When it loads, schedule the next request for 1s later
            setTimeout(update_action_time, 1000)
        });
        var pageUpdate = new Date(document.getElementById('updateTime').innerHTML);
        var actionUpdate = new Date(document.getElementById('actionTime').innerHTML);
        var now = new Date();
        console.log(actionUpdate.toLocaleString());  // This shows the problem
        console.log(pageUpdate.toLocaleString());
        if (actionUpdate > pageUpdate) {
            refresh_action_log();
            document.getElementById('updateTime').innerHTML = now.toLocaleString();
        };
    };
    update_action_time();
})

两条 console.log 行用于调试，但这向我展示了我不明白的东西。当页面首次加载时，两个日期都会打印到控制台。但是，在间隔之后，无论日期是否已更改，console.log(actionUpdate...) 都会输出“无效日期”。据我所知，actionTime 的重新加载不会改变任何格式等。如果 action_log 中最后一个操作的日期没有变化，last_action_time 的显示对我来说没有任何不同。如果 action_log 发生变化，则在 html 中更新 last_action_time。这似乎与 var actionUpdate 没有任何不同；第一次加载时，它会打印到控制台。此后每次都显示为“无效日期”。这也意味着 if 语句永远不会运行。

问题：

为什么重新加载页面的一部分会导致 javascript Date() innerHTML无法从页面的该部分读取跨度标签，即使该部分的其他所有内容似乎都相同？

标签： javascript

解决方案

在这里发现问题：

var actionUpdate = new Date(document.getElementById('actionTime').innerHTML);

由于我仍然不明白的原因，在初始页面加载之后，跨度的重新加载然后触发 .innerHTML 来读取跨度标签以及文本。

解决方案

var actionUpdate = new Date($("#actionTime").text());

推荐阅读