使用JavaScript实现timeStabilizer函数同步触发CSS按钮闪烁动画问题

实现思路合理性 #

你的实现思路是合理的。现有按钮的闪烁动画是各自在元素初始化渲染时启动，天然存在相位差，通过延迟到统一的整秒节点触发类切换，确实可以实现多个按钮闪烁状态同步的需求。

代码无法正常运行的核心原因 #

addEventListener 方法要求第二个参数传入函数引用作为事件触发时的回调，但你在绑定事件时直接执行了 secondStabilizer(xxx)，该函数没有返回值，相当于给点击事件绑定了 undefined 作为回调。页面加载遍历按钮节点时就会一次性执行完所有 secondStabilizer 调用，后续真实点击按钮时没有对应逻辑执行，自然不会生效。

另外你写的 secondStabilizer 函数内部的 nextSplitSecond、delayNeeded 变量没有加 let/const 声明，会默认挂载为全局变量，属于潜在的作用域污染问题。

修复方案 #

1. 修正事件绑定逻辑 #

把 secondStabilizer 的调用包裹在点击回调函数内，确保点击按钮时才会触发时间校准逻辑：

document.querySelectorAll('button').forEach( i => {
    i.addEventListener('click', () => {
        secondStabilizer(() => {
            i.classList.toggle('pressed');
        });
    });
});

2. 优化时间校准函数的变量声明 #

function secondStabilizer(executeFunction) {
    const initTime = new Date().getTime();
    const nextSplitSecond = inputTimeSign => Math.ceil(inputTimeSign / 1000) * 1000;
    const delayNeeded = nextSplitSecond(initTime) - initTime;
    setTimeout(executeFunction, delayNeeded);
}

拓展优化方案（可选） #

如果要实现所有按钮完全同步闪烁，还可以直接将动画绑定到所有按钮的公共父元素上，所有按钮的动画复用父元素的动画进度，不需要额外做时间校准，实现成本更低。

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