Я не могу повторить функцию в javascript - PullRequest
Новая
       60

Я не могу повторить функцию в javascript

1 голос
/ 19 июня 2020

Пытаюсь написать простой таймер табаты. До сих пор это работает, но проблема возникает, когда я пытаюсь повторить счет больше раз в зависимости от значения, хранящегося в переменной. Итак, представьте, что мы начинаем с 10 до 0 и хотим повторить этот счет дважды. сказал бы: когда я нажимаю кнопку, перед началом подсчета программа проверяет, является ли переменная с количеством раз NaN или есть ли в ней число. Если это NaN, потому что я не хотел повторяться, он просто начинает отсчет от 10 до 0 и останавливается. Хорошо, эта часть работает. Но что, если я скажу, что хочу повторить обратный отсчет дважды? Я ввел в переменную с именем "var times" количество раз, которое я хочу повторить, скажем 2, тогда я бы использовал a для l oop, например: 

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

Но когда я начинаю обратный отсчет , вместо того, чтобы повторяться дважды, пропускается много чисел в качестве значения переменной times. Почему?

Заранее спасибо

Вот мой код. 

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>

Ответы [ 2 ]

0 голосов
/ 19 июня 2020

Я понял это, проблема в том, что когда вы выполняете для l oop, он вызывает дважды заданный интервал, поэтому для этого случая вам нужно использовать рекурсию, вот рабочий код для этого случая -> 

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>
0 голосов
/ 19 июня 2020

Прежде всего не уверен, работает ваш logi c или нет. Я просто просматриваю код без тестирования, кажется, что calculate()> operation = setInterval(function(){... вызывает функцию обратного вызова, которая будет выполняться асинхронно.

если вы вызовете calculate() дважды, он просто вызовет асинхронизированный метод дважды в одно и то же время, а не последовательно.

Это означает, что ваш logi c внутри calculate() выполняется дважды одновременно, а не последовательно.

вы можете передать переменную times в функцию, например calculate(times) , и выполните в нем l oop, см. ниже пример 

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);

})
...