为何在sessionStorage逻辑中delay()方法失效？需延迟添加类

嗨，我来帮你排查这个问题——你遇到的核心问题是jQuery的.delay()方法根本就不是用来延迟普通DOM操作的，它只对jQuery的动画队列生效，而.addClass()是同步修改类名的方法，不会加入到动画队列里，所以你的delay完全没起作用。

为什么原来的代码不行？ #

.delay()是为.animate()、.fadeIn()这类需要排队执行的动画方法设计的，它会暂停队列里的下一个动画，但.addClass()不属于动画队列的一部分，所以delay对它无效，代码会直接跳过delay，立刻执行addClass。

两种可行的解决方案 #

方案1：用原生setTimeout（最推荐）

这是最直接且通用的方式，直接用浏览器的原生定时器来延迟执行addClass：

window.onload = function() {
  if (sessionStorage.getItem(".bts-popup") !== 'true') {
    // 延迟10秒执行添加类的操作
    setTimeout(function() {
      $('body.home, body.page-template-page-services').addClass('is-visible');
    }, 10000);
    // 立即标记sessionStorage，避免刷新页面重复触发
    sessionStorage.setItem('.bts-popup', 'true');
  }
}

方案2：用jQuery队列强制加入延迟

如果你想贴合jQuery的队列逻辑，可以把addClass放进.queue()方法里，这样它就会进入动画队列，受.delay()影响：

window.onload = function() {
  if (sessionStorage.getItem(".bts-popup") !== 'true') {
    $('body.home, body.page-template-page-services')
      .delay(10000)
      .queue(function(next) {
        $(this).addClass('is-visible');
        next(); // 必须调用next()，让队列里后续的操作继续执行
      });
    sessionStorage.setItem('.bts-popup', 'true');
  }
}

额外注意点 #

• 用!== 'true'代替!= 'true'，避免隐式类型转换导致的判断错误（比如如果sessionStorage里的值是null，!= 'true'也会成立，但!==更严谨）；
• sessionStorage.setItem要放在定时器外面，这样页面加载时就会立刻标记已处理，防止用户刷新页面后再次触发延迟操作。

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