如何在同一个函数中使用 setInterval() 和 clearInterval()答案

【问题标题】：How to use setInterval() and clearInterval() in the same function如何在同一个函数中使用 setInterval() 和 clearInterval()
【发布时间】：2020-02-13 01:46:52
【问题描述】：

我正在尝试创建一个启动和停止计时器的函数。启动总是在单击按钮时，但停止可能是由于计时器耗尽或从另一个函数再次调用该函数。

这是我目前所拥有的。非常适合您所看到的，但我无法弄清楚如何合并 clearInterval() 以便在游戏获胜时停止。正在运行的调用 timerCountdown 位于不同的 js 文件中。我已经阅读了类似问题的答案，但它们似乎都与我无法使其适用于我的情况有所不同

我确实意识到我需要调用 clearInterval(count) 但我不知道如何将其合并到函数本身中。

const timerCountdown = () => {                             
  let count = setInterval(() => {
    let timeLeft = timer.innerHTML
    if (timeLeft > 0) {
      timer.innerHTML = timeLeft - 1
    } else {
      gameOverMessage()
    }
  }, 1000) 
}

【问题讨论】：

所以let count 需要可以从外部访问。（另外setInterval 不准确）并且timeLeft 是一个字符串，而不是一个数字
你能告诉我们你的其他功能吗？
那么如果再次调用timerCountdown，那么倒计时停止并重新开始？
@epascarello - 为什么 setInterval 不准确？确实 timeLeft 是一个字符串，但它工作正常，所以我没有看到需要将其转换为数字
stackoverflow.com/questions/21097421/…

标签： javascript if-statement setinterval clearinterval

【解决方案1】：

您需要将间隔 id 推送到全局变量中。像这样，您可以在需要时使用另一个函数来停止间隔。

喜欢

let intervalId; // define `count` globaly
let timer = document.getElementById('timer')

const timerStop = () => {
  clearInterval(intervalId)
}

const timerRestart = () => {
  timerStop()
  timer.innerHTML = 100;
}

const timerStart = () => {
  timerStop(); // Stop timer by security, e.g. if you call `timerStart()` multiple times
  intervalId = setInterval(() => {
    let timeLeft = timer.innerHTML;
    if (+timeLeft > 0) {
      timer.innerHTML = +timeLeft - 1
    } else {
      timerRestart();
      gameOverMessage()
    }
  }, 1000)
}

<div id="timer">100</div>

<div>
  <button onclick="timerStart()">Start</button>
  <button onclick="timerStop()">Pause</button>
  <button onclick="timerRestart()">Restart</button>
</div>

【讨论】：

恕我直言，因为 let 和 const 没有被提升，所以最好在 timeStart 之前移动 timerStop
@MosèRaguzzini 谢谢，我添加了一个现场演示并移动了timerStop

【解决方案2】：

setInterval 尽最大努力根据您指定的时间间隔来间隔回调的运行。问题是：在游戏中，你真正想要的是将世界的当前状态以流畅及时的方式打印到屏幕上。这与setInterval的行为不同，后者对屏幕一无所知，盲目地反复调用。

例如：如果您在浏览器选项卡中为您的游戏启动 setInterval(foo, 100)，然后导航到浏览器中的另一个选项卡，等待十秒钟然后返回您的游戏，您的 foo 回调 当排队的回调“耗尽”时，将快速连续调用大约一百次。您不太可能想要这种行为。

requestAnimationFrame 是一个更好的解决方案，因为它仅在（不久之前）您的游戏被渲染时调用 - 这是您想要的。

在以下代码中，createTimer 创建了一个计时器对象。计时器有start、stop 和toggle 方法。

start 方法记录它何时被调用并触发requestAnimationFrame，提供一个名为tick 的回调。每次发生滴答声时，我们都会运行一些逻辑来查看要调用哪个（如果有）回调。

如果经过的时间大于或等于定时器的duration，则调用onTimeout回调并停止定时器。

如果经过的时间小于duration，但大于或等于interval 期间，则我们更新lastInterval 并调用onInterval 回调。

否则我们只是提示计时器的另一个滴答声。

stop 方法只是使用请求动画 ID 来取消带有cancelAnimationFrame 的计时器。

function createTimer() {
    let rafId = null

    function start({duration = 10000, interval = 1000, onInterval, onTimeout, onStop, startTime=performance.now(), lastInterval = startTime}) {
        function tick(now=performance.now()) {
            const elapsed = now - startTime 
            if (elapsed >= duration) {
                cancelAnimationFrame(rafId)
                rafId = null
                return onTimeout()
            }

            if ((now - lastInterval) >= interval) {
                lastInterval = now
                onInterval({
                    duration,
                    elapsed
                })
            }

            rafId = requestAnimationFrame(tick)
        }
        rafId = requestAnimationFrame(tick)
    }

    function stop() {
        cancelAnimationFrame(rafId)
        rafId = null
        return onStop()
    }

    function toggle(...args) {
        rafId ? stop() : start(...args)
    }

    const timer = {
        start,
        stop,
        toggle
    }

    return timer
}

const timer = createTimer()

const onInterval = ({duration, elapsed})=>console.log(`Remaining: ${((duration - elapsed)/1000).toFixed(0)}`)
const onTimeout = ()=>console.log('Timed out.')
const onStop = ()=>console.log('Manually stopped.')

document.getElementById('btn').addEventListener('click', () => timer.toggle({
    onInterval,
    onTimeout,
    onStop
}))

&lt;button id="btn"&gt;Toggle Timer&lt;/button&gt;

【讨论】：

【解决方案3】：

如果获胜或没有时间可用，您可以使用全局变量 intervalId 并清除间隔计时器。

var intervalId;

const timerCountdown = () => {                             
    intervalId = setInterval(() => {
        let timeLeft = timer.innerHTML
        if (timeLeft > 0) {
            timer.innerHTML = timeLeft - 1
        } else {
            clearInterval(intervalId);
            gameOverMessage();
        }
    }, 1000) 
  },
  won = () => {
      clearInterval(intervalId);
      // additional code
  };

【讨论】：