如何实现点击一次触发多次startspin() 完成转盘多次抽奖得多个奖品

问题原因 #

你之前的实现失效核心是两点：

1. Winwheel的旋转动画是异步执行的，直接同步重复调用startSpin()会因为首次调用后wheelSpinning被置为true，后续调用全部被拦截
2. 你写的startSpin2逻辑存在分支优先级错误，number_of_spin>0的判断已经覆盖了number_of_spin>=5的场景，后者永远不会触发，且直接将duration设为0会丢失旋转动画效果

实现思路 #

通过动画回调触发下一轮旋转的方式实现连抽逻辑：

• 新增全局变量存储剩余抽奖次数、所有中奖结果
• 单次抽奖结束的回调函数中判断是否还有剩余次数，有则自动重置转盘触发下一次抽奖，无则统一展示所有中奖结果
• 新增连抽触发函数，支持自定义连抽次数

完整修改代码 #

1. 全局变量新增 #

在原有全局变量区域新增以下参数：

let remainingSpins = 0; // 剩余待执行的抽奖次数
let prizeList = []; // 存储所有中奖结果

2. 新增连抽触发函数 #

// 连抽触发函数，传入参数为要连抽的次数
function startMultiSpin(spinCount) {
    // 防止重复触发、非法参数
    if (wheelSpinning === true || spinCount < 1) return;
    // 初始化连抽参数
    remainingSpins = spinCount;
    prizeList = [];
    // 禁用旋转按钮防止误触
    document.getElementById('spin_button').src = "spin_off.png";
    document.getElementById('spin_button').className = "";
    // 触发第一次抽奖
    startSpin();
}

3. 修改中奖回调函数alertPrize #

function alertPrize(indicatedSegment) {
    // 保存本次中奖结果
    prizeList.push(indicatedSegment.text);
    remainingSpins--;

    if (remainingSpins > 0) {
        // 还有剩余抽奖次数，重置转盘后触发下一次
        resetWheel();
        // 加300ms间隔避免动画衔接太突兀，可根据需求调整
        setTimeout(() => {
            startSpin();
        }, 300);
    } else {
        // 所有抽奖完成，统一展示中奖结果
        alert(`本次抽奖获得奖品：\n${prizeList.join('\n')}`);
        // 恢复按钮可点击状态（如果已选择动力档位）
        if (wheelPower > 0) {
            document.getElementById('spin_button').src = "spin_on.png";
            document.getElementById('spin_button').className = "clickable";
        }
    }
}

4. 页面新增连抽按钮（可选） #

在原有单抽按钮下方新增对应连抽按钮即可使用：

<br><br>
<button onclick="startMultiSpin(5)">5连抽</button>
<button onclick="startMultiSpin(10)">10连抽</button>

如果需要调整连抽时的旋转速度、动画时长，可在startSpin中根据remainingSpins的值动态调整theWheel.animation.duration和theWheel.animation.spins参数即可。

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