Блог

Я пытаюсь создать js-компонент обратного отсчета в typescript и получаю следующее.

Я хотел бы при каждом тике вызывать событие с оставшимся обратным отсчетом.

Я использую vs 2017, если это имеет значение.

 export class DateCountDown {

   constructor(date: any) {

     this.startCountDown(date);

   }   

   startCountDown(date: any) {
       const thousand = 1000;
       const sixty = 60;
       const twentyfour = 24;

       setInterval(() => {
           const now = new Date().getTime();
           const t = date - now;

           const days = Math.floor(t / (thousand * sixty * sixty * twentyfour));
           const hours = Math.floor((t % (thousand * sixty * sixty * twentyfour)) / (thousand * sixty * sixty));
           const minutes = Math.floor((t % (thousand * sixty * sixty)) / (thousand * sixty));
           const seconds = Math.floor((t % (thousand * sixty)) / thousand);

         //Raise the event with above values
       }, 1000);
}
  

}

Если повышение нескольких значений в событии не идеально, я создал класс для хранения значения, а затем повысил это.

 export class CountDownValues {
    daysLeft: number;
    hoursLeft: number;
    minutesLeft: number;
    secondsLeft: number;
    constructor(days: number, hours: number, minutes: number, seconds: number) {
        this.daysLeft = days;
        this.hoursLeft = hours;
        this.minutesLeft = minutes;
        this.secondsLeft = seconds;
    }
    public get days(): number {
        return this.daysLeft;
    }
    public get hours(): number {
        return this.hoursLeft;
    }
    public get minutes(): number {
        return this.minutesLeft;
    }
    public get seconds(): number {
        return this.secondsLeft;
    }
}
  

Я просто пытаюсь создать базовую библиотеку / компонент js, чтобы присвоить ей дату, и каждую секунду она вызывает событие с оставшимся временем, оттуда я могу присваивать различные значения для дней, часов, минут и секунд соответствующим элементам.

Если я понял ваш вопрос, вы хотите выдать событие, есть много способов сделать это… Вы можете использовать сторонний источник событий или создать basic самостоятельно… Вы также можете создать что-то, напоминающее отправитель событий, примерно так…

 class CountDownValues {
  daysLeft: number;
  hoursLeft: number;
  minutesLeft: number;
  secondsLeft: number;
  constructor(days: number, hours: number, minutes: number, seconds: number) {
    this.daysLeft = days;
    this.hoursLeft = hours;
    this.minutesLeft = minutes;
    this.secondsLeft = seconds;
  }
  public get days(): number {
    return this.daysLeft;
  }
  public get hours(): number {
    return this.hoursLeft;
  }
  public get minutes(): number {
    return this.minutesLeft;
  }
  public get seconds(): number {
    return this.secondsLeft;
  }
}

class DateCountDown {
  onCountDown: (values: CountDownValues) => void;

  constructor(date: Date) {
    this.startCountDown(date);
    this.onCountDown = () => {};
  }

  startCountDown(date: Date) {
    const thousand = 1000;
    const sixty = 60;
    const twentyfour = 24;

    setInterval(() => {
      const now = new Date().getTime();
      const t = date.valueOf() - now;

      const days = Math.floor(t / (thousand * sixty * sixty * twentyfour));
      const hours = Math.floor((t % (thousand * sixty * sixty * twentyfour)) / (thousand * sixty * sixty));
      const minutes = Math.floor((t % (thousand * sixty * sixty)) / (thousand * sixty));
      const seconds = Math.floor((t % (thousand * sixty)) / thousand);

      if (this.onCountDown) {
        this.onCountDown(new CountDownValues(days, hours, minutes, seconds))
      }
    }, 1000);
  }
}

let countDown = new DateCountDown(new Date());
countDown.onCountDown = values => console.log(values);
  

Вот демонстрация:https://stackblitz.com/edit/typescript-awx9gy?file=index.ts

OP: Есть ли причина, по которой я предпочел бы третью сторону этому?

1. Одновременно у вас может быть только один прослушиватель, что countDown.onCountDown = x => console.log("from first", x); countDown.onCountDown = x => console.log("from second", x); означает, что это не сработает… Вы увидите только «со второго», поскольку оно переопределяет первое. На самом деле это даже не источник событий… Это своего рода замаскированный обратный вызов… countDown.on("countDown", x => console.log(x)) является источником события, потому что оно регистрирует прослушиватель вместо переопределения…

2. Обычно люди больше знакомы с foo.on("bar", x => console.log(x)) или foo.addEventListener("bar", x => console.log(x))

Тем не менее, не должно возникнуть проблем с использованием этого, если вы создаете свою собственную крошечную вещь, над которой работаете или будете использовать только вы… Однако, чтобы преодолеть 1-ю причину, вы все равно могли бы реализовать что-то такое простое, как это