添加setTimeout实现preloader定时关闭功能失效问题求助

你的代码存在4个直接导致效果不符合预期的问题：

• 无效定时器：末尾的setTimeout(e, 3500)是错误写法，setTimeout第一个参数必须传入可执行函数，而e是存储document.readyState的字符串值，这行代码运行时会直接抛出类型错误，且没有任何业务作用。
• 回调内无效代码：第一个setTimeout的回调里，document.getElementById("interactive")仅获取了元素，没有执行任何样式修改/操作，属于无意义代码，如果你需要对这个id的元素做显隐控制，必须补充对应的样式设置语句。
• 时序逻辑混乱：两个setTimeout互相独立没有关联，你当前逻辑是页面加载完成后1秒就放开滚动、显示正文，和你想要的指定时长后关闭预加载的需求不匹配。
• 代码可读性差：大量使用逗号表达式、反向等值判断（"interactive" == e），很容易在编写时漏写逻辑、看错判断条件。

修正后代码 #

如果你的需求是：DOM解析到可交互状态时锁定滚动、隐藏正文、展示预加载器；等页面所有资源加载完成后，满3.5秒自动隐藏预加载器、恢复滚动、展示正文，可以直接用下面的代码：

document.onreadystatechange = function () {
    const currentState = document.readyState;
    if (currentState === "interactive") {
        document.body.style.overflow = "hidden";
        document.getElementById("contents").style.visibility = "hidden";
        return;
    }
    if (currentState === "complete") {
        setTimeout(function () {
            // 恢复页面滚动
            document.body.style.overflow = "auto";
            // 隐藏预加载器
            document.getElementById("load").style.visibility = "hidden";
            // 若需要操作id为interactive的元素，在此处补充对应逻辑，例如下方注释的隐藏语句
            // document.getElementById("interactive").style.visibility = "hidden";
            // 显示正文内容
            document.getElementById("contents").style.visibility = "visible";
        }, 3500);
    }
};

如果你需要预加载器在加载完成后先等1秒执行淡出动画，再在总时长3.5秒时完全移除，可以在上述setTimeout内部嵌套定时器实现，不要写互相独立的零散定时器。

内容的提问来源于stack exchange，提问作者a s