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
相关产品推荐
相关产品推荐

