javascript - 在 'setInterval' 末尾调用 Javascript 函数

Question

在发布此内容之前，我浏览了一些现有主题，但找不到任何有用的内容，我尝试了一些方法来解决此问题，但失败了。

我正在开发一个网站，今天我想用 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 秒触发一次，并且只刷新特定的 block (如菜单栏):

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

这也很好用，但我不能混合这两个功能，因为一旦我切换到深色模式主题，30秒后(触发自动刷新时)，它就会回到浅色模式(页面的原始状态) )。

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

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

它根本不起作用，该 block (只有这个 block ，而不是整个页面)仍然回到原始状态(浅色)。
我注意到它会切换到黑暗模式几毫秒，然后返回到原始状态。
我以为switchDark();首先执行调用，甚至在整个函数完成之前，以设置暗模式的方式执行，然后然后刷新 block 。

所以我尝试设置一个变量来阻止 switchDark(); 的执行在其他所有执行完成之前调用，但结果是相同的，这让我认为我的假设是错误的。

您能帮我找出问题所在吗？
如果您需要，我可以添加更多代码片段。

非常感谢

Answer 1

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();
    }
});