如何实现页面加载时Bootstrap模态框延迟1秒显示？现有代码添加延迟未生效

你现在的问题很明确——已经定义了延迟变量，但没真正把延迟逻辑用起来！咱们来一步步调整：

首先，你原来的代码里只是声明了delayMs，但完全没调用定时器来延迟执行模态框的显示操作。要实现延迟，得用JavaScript的setTimeout()函数把模态框的显示逻辑包裹起来。

另外提个小建议：你用#myModal作为sessionStorage的键名虽然没问题，但换成更语义化的名字（比如myModalShown）会更清晰，后续维护也方便。

修改后的完整代码如下：

$(document).ready(function() { 
    var delayMs = 1000; // 设置为1000毫秒，也就是1秒
    if (sessionStorage.getItem('myModalShown') !== 'true') { 
        // 用setTimeout包裹模态框显示逻辑，实现延迟
        setTimeout(function() {
            $('#myModal').modal('show'); 
        }, delayMs);
        // 这里把sessionStorage的设置放在定时器外面，避免用户在延迟期间刷新页面重复触发
        sessionStorage.setItem('myModalShown','true'); 
    } 
});

关键说明： #

• setTimeout()的第一个参数是要延迟执行的回调函数，第二个参数就是你要的延迟毫秒数，这里设1000就对应1秒。
• 把sessionStorage.setItem()放在定时器外面很重要：如果放在定时器里，用户在延迟的1秒内刷新页面，sessionStorage还没被设置，就会重复触发模态框，达不到“仅首次加载显示”的效果。

如果你的页面有大量资源需要加载，担心模态框触发时DOM还没准备好，也可以把$(document).ready()换成$(window).load()，不过现在大多数场景下ready已经足够覆盖Bootstrap模态框的初始化需求了。

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