如何避免鼠标移动时img.src被持续重复设置？

解决方案 #

问题核心是onMove事件触发频率极高，只要鼠标在按钮上移动，就会重复执行img.src = el.dataset.src——哪怕当前图片的src已经和目标路径一致，完全没必要重复设置。

解决思路很简单：在赋值前增加判断，仅当当前图片的src与按钮的目标路径不相等时，才更新src。

修改后的onMove函数代码 #

onMove(e) {
  const el = e.target

  if (el.type == 'button') {
    const img = tail.querySelector('img')
    // 对比当前路径与目标路径，不一致才更新
    if (img.src !== el.dataset.src) {
      img.src = el.dataset.src
    }
  }

  gsap.to(tail,{
    x:e.clientX,
    y:e.clientY
  })
}

补充优化（避免路径格式差异问题） #

注意img.src获取到的是浏览器解析后的绝对路径（比如http://yourdomain.com/dist/img/1.jpg），而el.dataset.src是你写的相对路径，极端情况下可能因为格式不一致导致判断失效。可以给元素加唯一标识来对比：

优化版HTML

<button type="button" data-src="./dist/img/1.jpg" data-img-id="1">
  text 1
</button>
<button type="button" data-src="./dist/img/2.jpg" data-img-id="2">
  text 2
</button>
<button type="button" data-src="./dist/img/3.jpg" data-img-id="3">
  text 3
</button>

优化版JS

onMove(e) {
  const el = e.target

  if (el.type == 'button') {
    const img = tail.querySelector('img')
    // 用唯一标识对比，不受路径格式影响
    if (img.dataset.imgId !== el.dataset.imgId) {
      img.src = el.dataset.src
      img.dataset.imgId = el.dataset.imgId
    }
  }

  gsap.to(tail,{
    x:e.clientX,
    y:e.clientY
  })
}

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