JavaScript数组二次执行未重置导致模态框无法弹出问题求助

根因分析 #

• 重复绑定事件：showModal函数每次执行都会给yes按钮新增一次click事件监听，多次触发modal后同一个按钮会绑定多个重复回调，执行时逻辑冲突导致状态异常
• GSAP时间线未复位：初始化定义的tl_showModal时间线首次播放完成后，后续直接调用play()不会从头执行，导致modal动画无法正常触发，视觉上看起来卡在else if分支
• 隐式全局变量隐患：init函数内的num没有声明，自动提升为全局变量，可能引发不可预期的状态问题

修复步骤 #

1. 将按钮的click事件监听从showModal函数内移出，全局只绑定一次
2. 调用showModal时先将GSAP时间线复位到初始状态再执行播放
3. 给init函数内的num添加变量声明

修复后核心代码 #

<div>Click in the blue area to gain focus, then hit the enter button on the keyboard to advance through the array.</div>
<div class="displayColor"></div>
<div class="modal-overlay"></div>
<button class='button'>yes</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script>
let colors = [0, 1, 2, 3];
let displayColor = document.querySelector('.displayColor');
let btn = document.querySelector('.button');

function init(){
    let randNum = Math.floor(Math.random() * colors.length);
    // 修复隐式全局变量问题
    let num = colors[randNum];
    colors.splice(randNum, 1); 

    switch(num){
    case 0:
        displayColor.textContent = 'blue';
        break; 
    case 1: 
        displayColor.textContent = 'green';
        break;
    case 2:
        displayColor.textContent = 'yellow';
        break;
    case 3:
        displayColor.textContent = 'orange';
        break;
    }
}

document.addEventListener('keydown', function(e){
    if(e.keyCode == 13 && colors.length > 0){
        e.preventDefault();
        init();
    } else if(e.keyCode == 13 && colors.length < 1) {
        gsap.to(displayColor, 0,{autoAlpha: 0});
        showModal();
        console.log('empty array');
    }
})

let tl_showModal = gsap.timeline({paused: true});
tl_showModal
    .to(displayColor, 0,{autoAlpha: 0})
    .to('.modal-overlay', {duration: .5, autoAlpha: 1}, 0)
    .to(document.querySelector('.displayColor'), {autoAlpha: 1,textContent: 'Wanna go again?'})
    .to(btn,{autoAlpha: 1})

// 按钮事件全局只绑定一次
btn.addEventListener('click', function(){
    if(colors.length === 0){
        gsap.to(btn,{autoAlpha: 0});
        gsap.to('.modal-overlay', {duration: .5, autoAlpha: 0});
        colors = [0,1,2,3];
        init();
   }       
}) 

function showModal(){
    // 先重置时间线到起始位置再播放
    tl_showModal.restart(); 
}   

init();
</script>

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