点击旋转元素22度后自动复位功能失效问题求助

先帮你拆解下原代码里的核心问题，这也是导致复位需要二次点击的根源：

• 你误用了setInterval，每隔3秒就替换一次元素的onclick事件，把原本的点击旋转逻辑改成了点击复位逻辑——但你要的是自动复位，不是手动点击复位。
• rotated变量从来没在点击时更新状态，导致角度切换的逻辑完全失效。
• 点击事件的绑定嵌套混乱，重复绑定会直接覆盖原有逻辑，造成行为异常。

修正后的基础版代码 #

// 只查询一次DOM，提升性能
const box = document.getElementById('box');

// 绑定一次点击事件即可
box.addEventListener('click', function() {
    // 点击时立即旋转22度
    box.style.transform = 'rotate(22deg)';
    // 3秒后自动复位到初始角度
    setTimeout(() => {
        box.style.transform = 'rotate(0deg)';
    }, 3000);
});

关键优化说明 #

• 用addEventListener绑定点击事件，避免重复绑定导致的逻辑覆盖问题。
• 用setTimeout（一次性定时器）替代setInterval，确保3秒后自动执行复位，不需要用户再次操作。
• 移除了冗余的前缀写法（现代浏览器已经支持标准的transform属性，无需单独写webkit/moz等前缀）。

进阶优化版（防止重复点击干扰） #

如果担心用户在3秒内多次点击导致旋转状态混乱，可以加个状态锁：

const box = document.getElementById('box');
let isRotating = false;

box.addEventListener('click', function() {
    if (isRotating) return; // 正在旋转时忽略重复点击
    
    isRotating = true;
    box.style.transform = 'rotate(22deg)';
    
    setTimeout(() => {
        box.style.transform = 'rotate(0deg)';
        isRotating = false; // 复位后允许再次触发
    }, 3000);
});

这样就能完美实现需求：点击元素立即顺时针转22度，3秒后自动回到初始状态，每次点击都能正常触发，不会出现二次点击才能复位的问题。

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