Создать класс таймера в Javascript

Привет, я создал следующий класс:

   class Temporizador {
    constructor() {
        this.tiempo = 0;
    }
    getTime() {
        return this.tiempo;
    }

    init() {
        console.log(n);
        document.getElementById('countdown').innerHTML = this.tiempo;
        this.tiempo++;
        setInterval(console.log(this.init()), 1000);
    }
}

И чтобы создать его экземпляр:

var temporizador = new Temporizador();
temporizador.init();

Я получил это из этой идеи: https://codepen.io/ evilnapsis / pen / wBZBgv

Проблема у меня возникла, потому что она в основном дает мне эту ошибку

Uncaught RangeError: Превышен максимальный размер стека вызовов

И, кроме того, я даже не получаю счетчик, вдруг я получаю 11432

6
задан 08.11.2019, 00:36
3 ответа

AquГ - есть несколько проблем:

  1. бесконечный Цикл, назвав init внутри setInterval.
  2. Как внутри setInterval estГЎs называя init снова, из-за каждой секунды estarГЎs создавая другой различные setInterval.
  3. Не estГЎs в том же контексте, чтобы использовать this.

Одна из правильных форм делания этого следующей serГ-:

class Temporizador {
    constructor() {
        this.tiempo = 0;
    }

    getTime() {
        return this.tiempo;
    }

    init() {
        var self = this;
        setInterval(function() {
            self.tiempo++;
            document.getElementById('countdown').innerHTML = self.tiempo;
        }, 1000);
    }
}

var temporizador = new Temporizador();
temporizador.init();
<div id="countdown">0</div>

FГ-jate, что внутри setInterval у нас есть две линии cГіdigo, которые нам изменяет стоимость счетчика и показывает результат.

6
ответ дан 10.11.2019, 22:26

Проблема в тебе cГіdigo приходит тебя funciГіn 'init ()'.

В этой lГ-nea setInterval(console.log(this.init()), 1000); estГЎs входя в цикл, в котором каждая секунда ты верил бы в новый интервал, и ademГЎs ты пробуешь печатать в консоли один результат одной funciГіn, что ничего не возвращает.

я создал этот cГіdigo, где я упорядочиваю ты funciГіn и ademГЎs, увеличиваю класс для aГ±adir одна funciГіn с которой останавливать temporizador.

class Temporizador {
    constructor() {
        this.tiempo = 0;
        this.interval;
    }
    getTime() {
        return this.tiempo;
    }

    init() {
        this.interval = setInterval(() => {
          this.tiempo++;
          document.getElementById('countdown').innerHTML = this.tiempo;
          console.log(this.tiempo)
        }, 1000);
    }
  
    stop() {
      clearInterval(this.interval)
    }
}

const timer = new Temporizador();
timer.init();
<span id="countdown">0</span>

В классе temporizador я нахожусь aГ±adiendo переменная 'interval', в 'init ()' инициализировался interval и внутри того же самого aГ±ado cГіdigo, который я хочу, чтобы работала каждая секунда, что serГ - в:

  1. Увеличивать стоимость 'времени'.
  2. Обновлять стоимость в HTML.
  3. Печатать стоимость в консоли.

В funciГіn 'stop ()' просто удалил 'interval'

Я надеюсь, что он подает тебе

3
ответ дан 10.11.2019, 22:26
  • 1
    Эта solució n я думаю, что он ó ptima, или по крайней мере это та, которая я propondrí в –  Pablo Lozano 08.11.2019, 02:06
  • 2
    Большое спасибо :) –  Vil_Llar 08.11.2019, 02:11

У тебя есть плохо эта часть cГіdigo:

init() {
        console.log(n);
        document.getElementById('countdown').innerHTML = this.tiempo;
        this.tiempo++;
        setInterval(console.log(this.init()), 1000);
    }

Призыв к console.log(this.init()) немедленный, потому что результат Ваш ejecuciГіn - то, что entregarГЎ как parГЎmetro в setInterval(), вызывая бесконечный цикл.

AdemГЎs кажется, что то, что ты хочешь, состоит в том, чтобы называть каждую секунду init(), из-за которого serГ - в один setTimeout() или иначе crearГ - в новый интервал в каждом вызове, заканчивая тем, что насыщая браузер temporizadores.

init() {
        console.log(n);
        document.getElementById('countdown').innerHTML = this.tiempo;
        this.tiempo++;
        setTimeout(() => console.log(this.init()), 1000);
    }

Сейчас мы происходим как parГЎmetro одна funciГіn anГіnima, что serГЎ выполненная вслед за 1000 м.

3
ответ дан 10.11.2019, 22:26
  • 1
    Привет, этот ответ не стоится, так как this.init() не будет функционировать, despué s из-за каждой секунды, которую он перемещает, ты вновь создаешь интервал. –  Eugeni Bejan 08.11.2019, 01:05
  • 2
    Если наблюдает có я говорю, что оригинал это идея temporizador, которую он хочет создать. –  franmost 08.11.2019, 01:15
  • 3
    funció n anó nima он не имеет доступа к this, из-за чего он идет, он бросит ошибку this.init это не funció n. –  Eugeni Bejan 08.11.2019, 01:24
  • 4
    Спасибо @EugeniBejan. Сейчас я понял то, что querí схвати говорить и видя твой ответ я это понял создания нового интервала. Я изменил мой ответ, но думаю, что твоя - та, которая deberí чтобы уносить отметку правильного ответа. У тебя есть мой обет. –  franmost 08.11.2019, 01:25
  • 5
    Реальное решение это: init () { setInterval (function (время) { document.getElementById (' countdown') .innerHTML = x ++; }, 1000); } –  otacon070 08.11.2019, 01:33

Теги

Похожие вопросы