Javascript 滑溜滑块-悬停并在鼠标离开时播放剩余的秒数

在Slick slider中，我使用以下配置

自动播放：对， 自动播放速度：6000， pauseOnHover:是的， 对,， 波塞诺：是的， 在这里，当我们将鼠标悬停在横幅上时，它将暂停，当鼠标再次离开时，计时器将再次运行6000ms并移动到下一张幻灯片

我需要像

如果我们将鼠标悬停在第3秒，再停留几秒钟，然后离开， 剩下的3秒钟应该停止播放下一张幻灯片。 如何在光滑滑块中实现这一点，请参见。

最后在光滑滑块中完成

我们需要考虑鼠标进出的时间，并且在用户多次进出鼠标

的情况下，即使在多个时间内也要计算剩余时间。 在slick slide中有一个选项，afterChange和init

并要考虑鼠标进出时间，对此反应可导入使用效果

需要使用时间戳吗

    const getElapsedTime = () => {
    let elapsedTime = 0

    for (let i = 0; i < timeStamps.length; i += 2) {
      const start = timeStamps[i]
      const stop = timeStamps[i + 1]
      elapsedTime += stop - start
    }

    return elapsedTime
  }

  useEffect(() => {
    if (previousHovered === false && hovered === true) {
      addTimeStamp()
    }

    if (previousHovered === true && hovered === false) {
      addTimeStamp()
      const elapsedTime = getElapsedTime()
      let remainingTime = parseInt(props.timer) - elapsedTime  // props.timer - 6000ms
      setAutoplaySpeed(remainingTime ? remainingTime : parseInt(props.timer))
    }
}, [hovered])

当滑块初始化init并在更改后更改时-传递计时器

鼠标悬停时存储当前时间，鼠标悬停时将时间存储在**数组中**

---

通过迭代数组和减法，我们可以得到elapsedTime。我们需要将暂停时间从6000ms更改为已用时间。当滑块再次更改时，我们需要设置6000ms。

您应该有一个完整的工作示例，因为缺少一些代码片段，例如鼠标悬停和鼠标退出

import React, { useEffect, useRef, useState } from "react"

  const slider = useRef()
  const [hovered, setHovered] = useState(false)
  const previousHovered = usePrevious(hovered)
  const [currentSlide, setCurrentSlide] = useState(-1)
  const [autoplaySpeed, setAutoplaySpeed] = useState(parseInt(props.timer))
  const [timeStamps, setTimeStamps] = useState([])
  const [sliderInitialized, setSliderInitialized] = useState(false)

  const addTimeStamp = () => setTimeStamps([...timeStamps, new Date()])

    const getElapsedTime = () => {
    let elapsedTime = 0

    for (let i = 0; i < timeStamps.length; i += 2) {
      const start = timeStamps[i]
      const stop = timeStamps[i + 1]
      elapsedTime += stop - start
    }

    return elapsedTime
  }

  useEffect(() => {
    if (previousHovered === false && hovered === true) {
      addTimeStamp()
    }

    if (previousHovered === true && hovered === false) {
      addTimeStamp()
      const elapsedTime = getElapsedTime()
      let remainingTime = parseInt(props.timer) - elapsedTime  // props.timer - 6000ms
      setAutoplaySpeed(remainingTime ? remainingTime : parseInt(props.timer))
    }
}, [hovered])