时间戳

首页 > 解决方案 > 在“setInterval”结束时调用 Javascript 函数

javascript - 在“setInterval”结束时调用 Javascript 函数

问题描述

在发布之前，我浏览了一些现有的主题，但没有得到任何帮助，我尝试了一些方法来解决这个问题，但它失败了。

我正在开发一个网站，今天我想用 Javascript 编写一个基本的暗模式开关：

<script type="text/javascript">
function switchWhite() {
    document.getElementById("body").className = "";
    document.getElementById("menubar").className = "navbar navbar-expand-lg navbar-light bg-light";
}

function switchDark() {
    document.getElementById("body").className = "dark";
    document.getElementById("menubar").className = "navbar navbar-expand-lg navbar-dark bg-dark";
}

function triggerSwitch() {
    if ( document.getElementById("body").className.match("dark") ) {
        switchWhite();
    } else {
        switchDark();
    }
}
</script>

<button onclick="triggerSwitch()">Switch Mode</button>

这工作得很好，但网站上有一个自动刷新，每 30 秒触发一次，它只刷新特定的块（如菜单栏）：

<script>
setInterval(function()
{
    $(document).ready(function() {
        $("#menubar_refresh").load(document.URL + " #menubar");
    });
}, 30000);
</script>

这也可以正常工作，但我不能混合这两个功能，因为一旦我切换到暗模式主题，30 秒后（触发自动刷新时），它会回到亮模式（页面的原始状态）。

虽然这是正常的，所以我尝试在 bloc 刷新后立即恢复暗模式，如下所示：

<script>
setInterval(function()
{
    $(document).ready(function() {
        $("#menubar_refresh").load(document.URL + " #menubar");
    });
    switchDark(); // here
}, 30000);
</script>

它根本不起作用，块（并且只有这个块，而不是整个页面）仍然恢复到原始状态（光）。
我注意到它切换到暗模式几毫秒，然后恢复到原始状态。
我认为switchDark();调用是首先执行的，甚至在整个函数完成之前，以设置暗模式然后刷新 bloc 的方式。

所以我尝试设置一个变量来阻止switchDark();call 的执行，然后再执行其他所有操作，但是结果是一样的，这让我认为我的假设是错误的。

你能帮我弄清楚这里有什么问题吗？
如果您需要，我可以添加更多代码片段。

非常感谢

标签： javascriptjqueryhtmlasynchronous

解决方案

load()是异步的，因此您需要修改完整回调中的任何新内容。

就像是：

$("#menubar_refresh").load(document.URL + " #menubar", switchDark);

或更详细的版本：

$("#menubar_refresh").load(document.URL + " #menubar", function(){
    // new content now exists
    // add logic as to which theme method to call
    if(isDark){
      switchDark();
    }
});

推荐阅读