我不能在 javascript 中重复一个函数答案

【问题标题】：I can't repeat a function in javascript我不能在 javascript 中重复一个函数
【发布时间】：2020-06-18 21:40:11
【问题描述】：

我正在尝试编写一个简单的 tabata 计时器。直到现在它仍然有效，但是当我尝试根据存储在变量中的值重复计数更多次时，问题就出现了。所以，假设我们从 10 开始到 0，我们想要重复这个计数两次。会说：当我按下按钮时，在计数开始之前，程序将检查带有次数的变量是否为 NaN 或其中是否有数字。如果是 NaN 因为我不想重复，它只是从 10 开始倒数到 0 并停止。好的，这部分有效。但是如果我说我想重复倒计时两次呢？我将我想要重复的次数放入名为“var times”的变量中，比如说 2，然后我会使用一个 for 循环，例如：

  for(var i=0; i<times; i++){}

但是当我开始倒计时时，它不会重复两次，而是跳过许多数字作为时间变量值。这是为什么呢？

提前致谢

这是我的代码。

var times = 2;
var counter = 0;
var operation;

document.getElementById("timer").textContent = 10;

function calculate(){

    counter = document.getElementById("timer").textContent
    operation = setInterval(function(){
        if(counter >= 1 && counter <= 10){
            counter -- ;
            document.getElementById("timer").textContent = counter;

        }
        else if(counter == 0){
            clearInterval(operation);
            document.getElementById("timer").textContent = 10;
            
            
        }

    },1000);

}

document.getElementById("btn").addEventListener("click", function(){

    for(var i=0; i<times; i++){

        calculate();
    }
   
})

.btn{
    position: absolute;
    width: 100%;
    top: 20%;
    margin:auto;
    text-align: center;
    
}

.timer{
    position: absolute;
    width: 100%;
    top:30%;
    margin:auto;
    text-align: center;
    font-size: 10rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>

</head>

<body>

    <div class="container">

        <div class="btn">

            <button id="btn">

                <h1>Click me</h1>

            </button>

        </div>

        <div class="timer">

            <p id="timer"></p>

        </div>

    </div>

    <script src="main.js"></script>
    
</body>

</html>

【问题讨论】：

究竟什么是“简单的tabata计时器”？
因为你多次调用setInterval，导致多次递减/递增。
顺便说一句，你可能不应该使用NaN，而是使用null，因为NaN 有一些你可能不想要的属性，例如它不等于它自己 (NaN != NaN)

标签： javascript function timer repeat

【解决方案1】：

我想通了，问题是当你执行 for 循环时，它调用了两次 setinterval，所以对于这种情况你需要做的是使用递归，这是一个适用于这种情况的工作代码->

var times = 2;
var counter = 0;
var operation;

document.getElementById("timer").textContent = 10;

function calculate(){
    counter = document.getElementById("timer").textContent
    operation = setInterval(function(){
        if(counter >= 1 && counter <= 10){
            counter -- ;
            document.getElementById("timer").textContent =   counter;
        }
        else if(counter == 0){
          times--
          console.log(times)
          if(times > 0){
            document.getElementById("timer").textContent = 10;
            clearInterval(operation);
            calculate()
          }else if(times == 0){
            clearInterval(operation);
            document.getElementById("timer").textContent = 10;
          }                
        }
       

    },1000);

}

.btn{
  z-index: 9999;
    position: absolute;
    width: 100%;
    top: 20%;
    margin:auto;
    text-align: center;
    
}

.timer{
    position: absolute;
    width: 100%;
    top:30%;
    margin:auto;
    text-align: center;
    font-size: 10rem;
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>

</head>

<body>

    <div class="container">

        <div class="btn">

            <button onClick="calculate()" id="btn">

                <h1>Click me</h1>

            </button>

        </div>

        <div class="timer">

            <p id="timer"></p>

        </div>

    </div>

    
</body>

</html>

【讨论】：

天哪！这很简单，但我真的找不到解决方案。在过去的 7 天里，我尝试了不同的方法，但从未达到这个解决方案。所以你在没有使用任何循环的情况下完成了这项工作！暂时没有！我什至尝试跳过使用循环，但我唯一尝试的是按顺序调用计算函数两次，这是行不通的。所以你说我必须以任何方式清除间隔，但如果计数器大于 0，只需再次调用计算函数。我想我正在弄清楚你所做的事情的意义！非常感谢！
不客气，这很棘手，但就像我说的你必须使用递归，对我来说这是最好的方法，不要忘记投票。是的，你有每次再次调用它时清除间隔，如果不是它链。
最后一件事...我赞成您的回答，但页面显示此消息：“感谢您的反馈！声望低于 15 人的投票将被记录，但不要更改公开显示的帖子分数。”如果我还能做些什么，请告诉我。再次感谢 Ciao！

【解决方案2】：

首先不确定您的逻辑是否有效。我只是在没有测试的情况下查看代码，似乎calculate() > operation = setInterval(function(){... 正在调用一个回调函数，它将异步执行。

如果你调用calculate() 两次，它只会同时触发两次异步方法，而不是按顺序。

这意味着你在calculate()里面的逻辑同时执行了两次，而不是按顺序。

您可以将times 变量传递给calculate(times) 这样的函数，并在其中执行循环，请参见下面的示例

function calculate(times){

    counter = document.getElementById("timer").textContent
    operation = setInterval(function(){
      /////////////////////////////
      // do the times loop here
      /////////////////////////////
      for(let i=0; i < times; i++){
        if(counter >= 1 && counter <= 10){
            counter -- ;
            document.getElementById("timer").textContent = counter;
        } else if(counter == 0) {
            clearInterval(operation);
            document.getElementById("timer").textContent = 10;
        }
      }
    },1000);

}

document.getElementById("btn").addEventListener("click", function(){

        calculate(times);

})

【讨论】：

感谢您的友好回复...我尝试了您的方法，但计时器在倒计时时一直跳过两个数字