Обратный отсчет с использованием Angular, Momentjs и Ngx-cookies не работает должным образом - PullRequest
Новая
       21

Обратный отсчет с использованием Angular, Momentjs и Ngx-cookies не работает должным образом

0 голосов
/ 28 января 2019

Я пытаюсь сделать обратный отсчет с 30 секунд до 0, используя Angular, но я пытаюсь что-то другое.Когда человек обновит браузер или перейдет на другой маршрутизатор, мне нужен обратный отсчет, чтобы продолжить работу.Итак, у меня была идея использовать moment.js, чтобы получить время, когда человек нажимает кнопку, и использовать ngOnInit, чтобы получить сохраненный файл cookie и рассчитать оставшееся время обратного отсчета.Но у меня есть некоторые проблемы: иногда отрицательные числа на обратном отсчете, а иногда он возвращается к нулю после смены маршрутизатора и возвращения.

Вот мой код: 

import { Component, OnInit } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';

import moment from 'moment';
import { Moment } from 'moment';


@Component({
  selector: 'app-countdown',
  templateUrl: './countdown.component.html',
  styleUrls: ['./countdown.component.css']
})
export class CountdownComponent implements OnInit {

  public isClicked: boolean = false;
  public countDown: number = 30;
  public diffSeconds: number;
  private interval: number;
  private timeSaved: number;
  private clickedSavedTime: number;
  private remainingTime: number;
  private checkCountDownCookie: boolean;
  private checkTimeSaved: boolean;

  constructor(
    private cookies: CookieService
  ) { }

  ngOnInit() {
    this.checkCountDownCookie = this.cookies.check('countDown');
    this.checkTimeSaved = this.cookies.check('timeClick');
    this.clickedSavedTime = +this.cookies.get('timeClick');


    if (this.countDown < 0 || !this.checkCountDownCookie) {
      this.clearAll();
      return;
    }

    if (this.checkTimeSaved) {
      console.log('here');
      this.keepCountdown();

    if (!this.remainingTime || this.remainingTime > 30 || !this.countDown) {
        this.clearAll();
        return;
      }
      this.startCountdown();
      return;
    }
  }

  public startCountdown(): void {
    this.isClicked = true;

    if (!this.checkTimeSaved) {
      this.saveCookie('timeClick', moment().unix());
    }

    this.interval = setInterval(() => {
      if (!this.countDown) {
        this.clearAll();
        return;
      }
      this.countDown --;
      this.saveCookie('countDown', this.countDown);
      console.log(this.countDown);
    }, 1000);

  }

  public saveCookie(name: string, value: number): void {
    this.cookies.set(name, value.toString());
  }

  public clearAll(): void {
    this.cookies.delete('countDown');
    this.cookies.delete('timeClick');
    clearInterval(this.interval);
    this.countDown = 30;
    this.isClicked = false;
  }

  public keepCountdown() {
    this.timeSaved = +moment.unix(+this.cookies.get('timeClick'));
    this.diffSeconds = moment.duration(moment().diff(this.timeSaved)).seconds();
    this.remainingTime = this.countDown - this.diffSeconds;
    this.countDown = this.remainingTime;
  }
}

StackBlitz: https://stackblitz.com/edit/angular-ysizt1?file=src%2Fapp%2Fcomponents%2Fcountdown%2Fcountdown.component.ts

...