You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

WordPress如何设置js脚本每会话单次运行且延迟10秒执行

WordPress自定义JS双规则配置实现方案

你要的两个需求(单会话仅运行1次、延迟10秒执行)不需要额外装插件,靠前端原生API就能实现,下面给两种可直接落地的方案:

方案1:直接修改原有JS脚本(通用度最高)

核心逻辑用sessionStorage做运行标记——这个API天生就是单用户会话周期生效,用户关闭标签页/结束会话后标记自动清除,不需要手动设过期时间,比用cookie更轻量;延迟执行直接用setTimeout设10000毫秒(即10秒)即可。
操作步骤:

  • 打开你准备好的JS脚本,在最外层套上判断逻辑
  • 把你原有的核心执行代码放到延迟回调里
  • 核心逻辑执行完成后写入运行标记,避免重复触发
    可直接套用的代码模板:
// 自定义唯一标记值,建议改得复杂点,避免和站点其他脚本的存储key冲突
const SCRIPT_EXECUTED_FLAG = 'wp_custom_js_run_v1';

// 校验当前会话是否已经执行过脚本
if (!sessionStorage.getItem(SCRIPT_EXECUTED_FLAG)) {
  setTimeout(() => {
    // === 下方替换成你原有JS脚本的全部核心代码 ===
    console.log('自定义脚本执行成功');
    // === 原有代码替换结束 ===

    // 执行完成后写入标记,同会话内刷新、跳转页面都不会再执行
    sessionStorage.setItem(SCRIPT_EXECUTED_FLAG, '1');
  }, 10000); // 这里单位是毫秒,10000对应10秒
}

注意:sessionStorage是单标签页隔离的,用户如果同时打开两个你站点的标签页,两个标签页会各自独立执行一次脚本,符合单会话的运行规则。

方案2:WordPress钩子挂载(无需修改原JS文件)

如果你不想改动原有JS文件,可以直接在主题的functions.php里加挂载逻辑,通过WordPress原生的脚本加载API实现规则,还能避免重复请求JS文件,性能更好。
把下面的代码加到主题functions.php的末尾即可,注意替换成你自己的JS文件路径:

add_action('wp_enqueue_scripts', function() {
  // 替换成你的JS文件实际路径,这里示例是放在主题js目录下的custom.js
  $js_path = get_template_directory_uri() . '/js/custom.js';
  wp_register_script('wp_custom_js', $js_path, [], '1.0', true);

  // 前置判断逻辑,在JS文件加载前执行
  wp_add_inline_script('wp_custom_js', '
    const SCRIPT_EXECUTED_FLAG = "wp_custom_js_run_v1";
    if (sessionStorage.getItem(SCRIPT_EXECUTED_FLAG)) {
      // 已执行过直接移除脚本加载,省流量
      document.currentScript.remove();
    } else {
      // 暂停脚本自动执行,等10秒后再触发
      const originScript = document.currentScript.nextSibling;
      originScript.setAttribute("type", "text/plain");
      setTimeout(() => {
        originScript.setAttribute("type", "application/javascript");
        // 脚本执行完成后打标记
        originScript.addEventListener("load", () => {
          sessionStorage.setItem(SCRIPT_EXECUTED_FLAG, "1");
        })
      }, 10000);
    }
  ', 'before');

  wp_enqueue_script('wp_custom_js');
});

避坑提示

  • 不要用localStorage存运行标记,它是永久本地存储,用户关闭浏览器下次访问标记还在,不符合单会话仅运行一次的要求
  • setTimeout的单位是毫秒,不要把10秒误写成10,否则只会延迟10毫秒
  • 如果站点开了全页缓存,这套逻辑依然可以正常运行,因为所有判断都在用户浏览器端执行,不受服务端缓存影响

内容的提问来源于stack exchange,提问作者Eryk

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.29 23:57:17