点击按钮后如何用JavaScript实现图标2秒后动态切换回原图标

我的脚本用于提示文本复制成功，点击按钮时首次图标切换、Toast提示框显示正常，文本也能通过clipboard.js正确复制。但希望点击按钮2秒后，把图标从fa-circle-check切回fa-clipboard，尝试多种方法后仍未解决。使用的技术栈：clipboard.js、Bootstrap 5（bundle）、Font Awesome。

按钮代码 #

<button 
   class="btn btn-outline-success"
   id="url-rss" data-clipboard-text="Texte à copier">
      <i class="fa-regular fa-clipboard" id="icon"></i>
</button>

我编写的脚本 #

document.addEventListener('DOMContentLoaded', function () {
    // Load of Clipboard.js
    let clipboard = new ClipboardJS('#url-rss')

    // Variable for the Toast with Bootstrap 5
    let toastCopie = new bootstrap.Toast(document.querySelector('#copieToast'), {
        animation: true,
        delay: 2500
    });

    // We listen #url-rss on click
    document.querySelector('#url-rss').addEventListener('click', async function() {
        // If Click on the <button> do a Toast()
        toastCopie.show()

        let iconElement = document.querySelector('#icon')

        // Change of the icon, first round
        iconElement.classList.remove('fa-clipboard')
        iconElement.classList.add('fa-circle-check')

        await new Promise(resolve => setTimeout(resolve, 2000));

        // Chnage of the icon, second round
        iconElement.classList.remove('fa-circle-check');
        iconElement.classList.add('fa-clipboard');
    })
});

尝试过的代码片段 #

setTimeout(function() {
    iconElement.classList.remove('fa-circle-check');
    iconElement.classList.add('fa-clipboard');
}, 2000);

解决方案 #

问题根源是clipboard.js会触发额外的点击事件，导致按钮的click监听器被重复执行，图标刚恢复就被再次切换成成功状态。正确做法是监听clipboard.js的success事件，仅在复制成功时执行逻辑：

document.addEventListener('DOMContentLoaded', function () {
    const clipboard = new ClipboardJS('#url-rss');
    const toastCopie = new bootstrap.Toast(document.querySelector('#copieToast'), {
        animation: true,
        delay: 2500
    });
    const iconElement = document.querySelector('#icon');

    // 监听复制成功事件
    clipboard.on('success', function(e) {
        toastCopie.show();
        // 切换图标为成功状态
        iconElement.classList.remove('fa-clipboard');
        iconElement.classList.add('fa-circle-check');
        
        // 2秒后恢复原图标
        setTimeout(() => {
            iconElement.classList.remove('fa-circle-check');
            iconElement.classList.add('fa-clipboard');
        }, 2000);
        
        // 清除选中内容（优化体验）
        e.clearSelection();
    });
});

关键优化点 #

• 改用clipboard.js的success事件，确保逻辑仅在复制成功时触发，避免重复执行
• 提前获取图标元素，减少DOM查询次数
• 使用箭头函数简化定时器写法，保持上下文一致
• 添加e.clearSelection()清除复制后的文本选中状态，提升用户体验

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