讲师中心 微信公众号
AI工具推荐 视频效率加速

利用 Shared Worker 构建多标签页对齐的全局抽奖冷却状态

星芳姑娘_6318

星芳姑娘_6318

发布时间:2026-05-21 20:14:59

|

279人浏览过

|

来源于php中文网

原创

Shared Worker 是实现多标签页抽奖冷却状态对齐最干净、最可控的原生方案,通过全局状态机、精准倒计时、统一校验与广播机制保障一致性,并需兼容 Safari 降级及持久化容错。

利用 shared worker 构建多标签页对齐的全局抽奖冷却状态

Shared Worker 是实现多标签页抽奖冷却状态对齐最干净、最可控的原生方案。它让所有同源页面共享一个后台线程,统一维护倒计时、触发时机和状态变更逻辑,避免每个标签页各自计时导致“A页刚抽完,B页还能再抽一次”的漏洞。

核心设计:用 Shared Worker 托管冷却状态机

抽奖冷却不是简单存个时间戳,而是一个带生命周期的状态机:初始空闲 → 抽奖触发 → 倒计时中 → 到期重置。Shared Worker 正适合承载这个状态机:

  • 全局唯一 state 对象(如 { remaining: 0, lastDrawAt: 0, isCooling: false }),所有标签页读写同一份内存
  • 倒计时用 Worker 内部 setInterval,不受页面失焦、后台暂停影响,保证精准到期
  • 每次抽奖请求由页面发给 Worker,Worker 统一校验是否可抽(remaining ≤ 0 且未在冷却中),再更新状态并广播结果
  • 到期后自动广播 { type: "cooldown-ended" },各页面据此启用按钮、刷新 UI

关键通信与同步逻辑

页面不直接操作时间或状态,只通过 MessagePort 与 Worker 交互:

  • 页面连接后立即发送 { type: "sync-state" },Worker 回传当前 remaining 和 isCooling
  • 点击抽奖时,页面发 { type: "try-draw", clientId: "tab-abc123" };Worker 检查并返回 { type: "draw-allowed" } 或 { type: "on-cooldown", remaining: 123 }
  • Worker 启动倒计时后,每秒广播 { type: "tick", remaining: X },供页面做进度条;也可只广播关键节点(开始/结束),减少通信量
  • 页面关闭前发 { type: "disconnect", clientId },Worker 清理对应上下文(虽不影响冷却,但利于调试和扩展)

必须处理的边界与降级

Shared Worker 不是银弹,尤其在 Safari 和旧环境中:

  • Safari 兼容性:仅 iOS 16.4+/macOS 13.3+ 支持,且必须 HTTPS 或 localhost。检测失败时,立刻 fallback 到 BroadcastChannel + localStorage 方案
  • 降级逻辑:首个打开的页面写入 localStorage.setItem("draw-lock", Date.now()) 并启动本地倒计时;其他页面监听 storage 事件,读取时间戳并自行计算 remaining,同时用 BroadcastChannel 协调“谁来当主控页”
  • 状态持久化:Worker 重启或全站刷新会导致状态丢失。需在抽奖成功后,将 lastDrawAt 同步写入 IndexedDB 或 localStorage,Worker 初始化时优先从持久存储恢复
  • 防并发误触:两个标签页几乎同时点抽奖,Worker 内部用标记位(if (!isProcessing) { isProcessing = true; ... isProcessing = false; })确保原子判断

部署与调试要点

Shared Worker 脚本必须是独立文件,不能内联;路径需严格同源且可被所有页面访问:

  • 脚本放在根目录如 /shared-draw-worker.js,所有页面都用 new SharedWorker('/shared-draw-worker.js')
  • 页面端务必调用 worker.port.start(),否则消息通道不通
  • Worker 内监听 connect 事件获取 port,每个 port 绑定独立 clientId(可用 crypto.randomUUID()),用于定向响应
  • 开发时用 chrome://inspect 或 Safari Web Inspector 直接调试 Shared Worker 线程,查看 console 和断点

热门AI工具

更多
蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

5446

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

1329

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

5384

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

1020

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

1956

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

3785

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

4953

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

3260

2023.09.20

Uvicorn 报错与问题解决教程
Uvicorn 报错与问题解决教程

本专题汇总了Uvicorn服务器常见问题与报错解决的教程合集,涵盖启动失败、端口占用、模块导入错误、事件循环冲突及热重载失效等典型故障的排查思路。同时整理了多进程与Worker配置、SSL/HTTPS证书报错、跨域与代理配置等实战解决方案,助你快速定位并解决Uvicorn运行中的各类问题。

0

2026.11.02

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
誉天教育RHCE视频教程
誉天教育RHCE视频教程

共9课时 | 1.8万人学习

尚观Linux RHCE视频教程(二)
尚观Linux RHCE视频教程(二)

共34课时 | 7万人学习

尚观RHCE视频教程(一)
尚观RHCE视频教程(一)

共28课时 | 5.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn