如何防止滑块translate动画未完成时重复点击按钮？

首先确保你的滑块元素已经添加了过渡动画的CSS样式（对应你说的1秒动画时长）：

.slider {
  transition: transform 1s ease;
}

下面提供两种可靠的实现方式：

方法一：状态变量+定时器控制 #

通过一个状态标记判断当前是否处于动画状态，点击时先校验状态，动画中直接终止后续逻辑，动画开始后用定时器在指定时长后恢复可点击状态。

修改后的JavaScript代码：

// 状态标记：是否正在执行滑块动画
let isSliderAnimating = false;
// 动画时长，和CSS过渡时长保持一致
const animationDuration = 1000;

// 左侧滑块按钮点击事件
sliderBtnLeft.addEventListener("click", () => {
    // 动画中直接返回，不执行滑动逻辑
    if (isSliderAnimating) return;

    // 标记为正在动画
    isSliderAnimating = true;

    // 获取容器宽度
    const x = slider.clientWidth;
    // 获取当前滑块的translateX值
    const tempTranslateX = getTranslateX(slider);

    // 判断是否是第一个滑块元素，执行对应滑动逻辑
    if(tempTranslateX >= 0) {
        slider.style.transform = `translateX(-${(amountElems - 1) * x}px)`;   
    } else {
        const newTranslateX = tempTranslateX + x;
        slider.style.transform = `translateX(${newTranslateX}px)`;
    }

    // 动画结束后恢复可点击状态
    setTimeout(() => {
        isSliderAnimating = false;
    }, animationDuration);
});

// 获取元素translateX值的工具函数
function getTranslateX(elem) {
    const style = window.getComputedStyle(elem);
    const matrix = new WebKitCSSMatrix(style.transform);
    return matrix.m41;
}

方法二：监听transitionend事件 #

利用CSS过渡结束时触发的transitionend事件，在点击按钮时立即禁用按钮，动画真正结束后再启用按钮。这种方式比定时器更精准，能自动适配动画被中断、时长修改等场景。

修改后的JavaScript代码：

// 绑定滑块过渡结束事件，避免重复绑定
slider.addEventListener('transitionend', (e) => {
    // 仅当transform属性过渡结束时，恢复按钮可点击状态
    if (e.propertyName === 'transform') {
        sliderBtnLeft.disabled = false;
    }
});

// 左侧滑块按钮点击事件
sliderBtnLeft.addEventListener("click", () => {
    // 点击后立即禁用按钮
    sliderBtnLeft.disabled = true;

    // 获取容器宽度
    const x = slider.clientWidth;
    // 获取当前滑块的translateX值
    const tempTranslateX = getTranslateX(slider);

    // 判断是否是第一个滑块元素，执行对应滑动逻辑
    if(tempTranslateX >= 0) {
        slider.style.transform = `translateX(-${(amountElems - 1) * x}px)`;   
    } else {
        const newTranslateX = tempTranslateX + x;
        slider.style.transform = `translateX(${newTranslateX}px)`;
    }
});

// 获取元素translateX值的工具函数
function getTranslateX(elem) {
    const style = window.getComputedStyle(elem);
    const matrix = new WebKitCSSMatrix(style.transform);
    return matrix.m41;
}

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