点击按钮后切换图片并维持5秒的JavaScript实现问题

嗨，我完全懂你的需求——你想要点击按钮后立刻切换图片，让这张新图片维持5秒，之后再切回原来的图片对吧？你的现有代码是延迟5秒才切换图片，顺序刚好反了，咱们调整一下逻辑就能搞定！

核心思路 #

1. 点击按钮时，立刻替换图片源为目标图片
2. 用setTimeout设置一个5秒的延迟，时间到后再把图片源切回原来的地址

具体代码实现 #

假设你的按钮就是这个图片元素本身（或者你可以给按钮绑定点击事件，操作图片），代码可以这么写：

// 提前获取图片元素并保存原始图片地址
const buttonImg = document.getElementById('buttonImg');
const originalImageSrc = buttonImg.src;

// 给图片绑定点击事件
buttonImg.addEventListener('click', function() {
    // 第一步：立刻切换到新图片
    buttonImg.src = 'images/button2.png';
    
    // 第二步：5秒后切回原始图片
    setTimeout(function() {
        buttonImg.src = originalImageSrc;
    }, 5000);
});

如果你的按钮是单独的<button>标签（不是图片本身），只需要把点击事件绑定到按钮上即可：

const triggerButton = document.getElementById('yourButtonId');
const buttonImg = document.getElementById('buttonImg');
const originalImageSrc = buttonImg.src;

triggerButton.addEventListener('click', function() {
    buttonImg.src = 'images/button2.png';
    setTimeout(() => {
        buttonImg.src = originalImageSrc;
    }, 5000);
});

为什么原来的代码不符合需求？ #

你之前的代码是让setTimeout延迟5秒后才执行切换图片的操作，相当于“等5秒再换图”；而我们需要的是“先换图，再等5秒换回去”，所以把切换图片的操作放在setTimeout外面，延迟执行的是还原图片的操作就对啦～

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