JavaScript实现点击图片临时切换数秒后自动恢复原图

核心逻辑很简单：点击时先记下原始图片地址，切换到新图后启动延时任务，到点把地址改回去就行，建议加个简单的防抖处理，避免连续点图片时定时器乱跳导致切回时机不对。

完整实现代码 #

直接替换你原来的代码即可，等待时长可以自己改，示例里设的是3秒（对应3000毫秒）：

<img 
  src="contacticons.jpg" 
  usemap="#image-map" 
  id="imgName"
  style="cursor: pointer;"
>

<script>
const targetImg = document.getElementById('imgName');
// 固定存好原始图和新图地址
const ORIGIN_IMG = targetImg.src;
const NEW_IMG = '../newImgSrc.jpg';
// 配置切回等待时长，单位毫秒
const DELAY = 3000;
let timer = null;

targetImg.addEventListener('click', () => {
  // 连续点击时先清掉之前没执行的切回任务，重新计时
  if(timer) clearTimeout(timer);
  // 切到新图
  targetImg.src = NEW_IMG;
  // 到点切回原图
  timer = setTimeout(() => {
    targetImg.src = ORIGIN_IMG;
    timer = null;
  }, DELAY)
})
</script>

实现细节说明 #

• 提前缓存原始图片地址：避免后续src被修改后拿不到初始地址，不需要每次点击都重复读取
• 定时器防抖：连续点击时重置计时，保证最后一次点击后等够设置的时长再切回，不会出现中途突然跳回原图的问题
• 移除无效的空<a>标签：直接给img绑定事件更简洁，不需要额外标签嵌套，给img加cursor:pointer样式后，鼠标悬浮会显示手型，和点击链接的交互体验一致

极简内联写法（不推荐，无防抖） #

如果你不想单独写script块，想把逻辑全塞在元素属性里，也可以用下面的写法，缺点是连续快速点击时可能出现切回时机错乱：

<img 
  src="contacticons.jpg" 
  usemap="#image-map" 
  id="imgName"
  style="cursor: pointer;"
  onclick="const origin = this.src; this.src='../newImgSrc.jpg'; setTimeout(() => this.src = origin, 3000)"
>

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