javascript - 从左到右移动img，停止5秒改变img然后继续用旧的img agin vanilla js向右移动

Question

我有两张行走的猫和跳舞的猫的图像

我需要将行走的猫 img 移动到窗口的中间，然后将 img 更改为跳舞的猫，仍然暂停 5 秒跳舞，5 秒后行走的猫再次返回并继续行走到窗口的尽头，然后再次从窗口的开始

我使用 setTimeout 、 setInterval 和 clearInterval 进行暂停，所以猫走到中间然后暂停并跳舞，5 秒后返回行走但直到窗口结束才移动

清除此代码后有没有办法返回间隔？谢谢

let img = document.getElementsByTagName('img')[0]
img.style.left = 0
let x = 0

function moving() {

  if(x ===  ((window.innerWidth)-400)/2 ) {
    img.setAttribute('src' , 'dancing cat src')
    setTimeout(() => {
      img.setAttribute('src' , 'walkingCat src')
    }, 5000)
    clearInterval(interval)

  } else {
    x >= (window.innerWidth)-300 ?  x = 0 : x += 10
    img.style.left = x +'px'

  }  


}
const interval =  setInterval(moving , 50)

<img>