问题[setinterval]

根据角色的攻击速度，有需要用速度带走的生命值。问题：console.log(currentChartherHealth) 显示角色的起始生命值时生命值没有被带走

        let curentChartherHealth
        let curentRandHealth
             let timerId = setInterval(()=> {
                curentChartherHealth = character.health - rand.damage-character.armor

             console.log(curentChartherHealth)

        },character.atackSpeed)
        let timerId2 = setInterval(()=>{
            curentRandHealth = rand.health - (character.damage-rand.armor)
    
        },rand.atackSpeed)
        if(curentChartherHealth<=0){
            alert(`${rand.name} Win!`)
            clearInterval(timerId)
        } else if(curentRandHealth<=0){
            alert(`${character.name} Win!`)
            clearInterval(timerId)
        }
    }

以及如何每秒将计数器的值增加 10 ......我得到了 1

'use strict';

setInterval(() => {

  const somEl = document.querySelector('[data-id="counter"]');
  somEl.__counterValue = somEl.textContent;

  somEl.textContent ++;


}, 1000);

<div>Нас уже <span data-id="counter">0</span></div>

我用React写。当将useState钩子与setInterval函数结合使用时，我无法理解组件的状态会发生什么。我实现了预期的行为，但在草稿中我觉得我误解了一些东西。

我正在尝试实现的内容： 当指针每按一次 DOM 元素（比如 200，但没关系）ms 时，递增和递减存储在组件状态中的变量

我有 3 个代码选项，其中 2 个不能按预期工作，即当按下“+”时，变量的值不断变为 1 并立即变回 0。嗯，一个工作选项。

我意识到这可以使用 useEffect 钩子来实现，原则上我没有它就成功了，但问题是，为什么我的两个选项的行为不像我预期的那样，但其中一个仍然可以正常工作？

顺便说一句，选项 3 的性能，受限于选项 2 的不可操作性，让我非常惊讶，因为我一直认为这是等效的。

非工作选项#1：

const IndexPage = function () {
  const [count, setCount] = React.useState(0)
  const [id, setId] = React.useState(null)
  const delay = 200

  function inc() {
    let contextCount = count
    setId(setInterval(setCount, delay, count + 1))
  }

  function dec() {
    let contextCount = count
    setId(setInterval(setCount, delay, count - 1))
  }

  function clean() {
    clearInterval(id)
  }
  return (
    <Layout>
      <h1>{count}</h1>
      <p style={btn} onPointerDown={inc} onPointerUp={clean}>
        +
      </p>
      <p style={btn} onPointerDown={dec} onPointerUp={clean}>
        -
      </p>
    </Layout>
  )
}

export default IndexPage

非工作选项#2（仅更改功能）：

function inc() {
    let contextCount = count
    setId(
      setInterval(setCount, delay, ++contextCount)
    )
  }

  function dec() {
    let contextCount = count
    setId(
      setInterval(setCount, delay, --contextCount)
    )
  }

工作选项：

function inc() {
    let contextCount = count
    setId(
      setInterval(() => {
        setCount(++contextCount)
      }, delay)
    )
  }

  function dec() {
    let contextCount = count
    setId(
      setInterval(() => {
        setCount(--contextCount)
      }, delay)
    )
  }

我做了一个动画：一个鬼出现又消失。而且，他在场的时间少于他不在场的时间，这正是我想要的。

但是出现的时间是不能调节的，但是，好像是取决于整个区间的时间t

var t = setInterval(function appear(){
    var ghost = document.getElementById("ghost");
    if (ghost.style.display == "none")
            {ghost.style.display = "block";}
    else
            {var t1 = setTimeout(function disappear(){
            ghost.style.display = "none";
            }, 1)}      
}, 6000)

它应该按功能消失t1。我想做的更少。延迟t1减少到1ms，但没有响应。为什么是这样？

var t = setInterval(function appear() {
  var ghost = document.getElementById("ghost");
  if (ghost.style.display == "none") {
    ghost.style.display = "block";
  } else {
    var t1 = setTimeout(function disappear() {
      ghost.style.display = "none";
    }, 1)
  }
}, 6000)

body {
  background: black url(https://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
}

#ghost {
  position: absolute;
  left: 25%;
  display: none;
}

<img id="ghost" src="https://isstatic.askoverflow.dev/nrYtc.png" width="280">