jQuery 切换页面后动画不同步

Question

我正在尝试创建一个文本会发生变化的页面，并且在每个文本之间使用淡入和淡出，这非常有效，但是当我更改 window 时，此动画会延迟，但是我用来更改文本的 .html 不会延迟，并最终使所有内容不同步。

有谁知道这个的任何解决方案?

这是我的JS代码

$(document).ready(() => {
  let ms = 8000
  let textQueue = ['1', '2', '3']
  for (let index = 0; index < textQueue.length; index++) {
    ((index) => {
      setTimeout(() => {
        if (index == textQueue.length - 1) {
          $(".text").click(() => {
            window.open('link')
          })
        }
        $(".text")
          .html(textQueue[index])
          .fadeIn(1500)
          .delay(5000)
          .fadeOut(1500)
      }, ms * index)
    })(index)
  }
})

Answer 1

我设法解决了这个问题并改进了代码，我会把它留在这里以防万一有人需要它。
基本上我将它设置为仅在 fadeOut 动画结束时更改文本.

JS代码：

$(document).ready(() => {
  let ms = 8000
  let textQueue = [
    '0',
    '1',
    '2'
  ]

  let index = 0
  $(document).click(() => {
    if (index + 1 === textQueue.length) {
      window.open('link')
      return
    }
    index++
    $(".text").html(textQueue[index])
  })
  animation()

  function animation() {
    if (index < textQueue.length) {
      $(".text").fadeOut(1500, () => {
        $(".text").html(textQueue[index])
      })
    }
    $(".text")
      .fadeIn(1500)
      .delay(5000)
    setTimeout(() => {
      if (index < textQueue.length - 1) {
        index++
        animation()
      }
    }, 8000)
  }
})

jQuery 切换页面后动画不同步

jQuery animation out of sync after switching pages

javascript

jquery

jquery-animate

web-frontend