Обещание, кажется, не разрешается вообще

Question

Я пытаюсь написать эффект пишущей машинки в Angular, но кажется, что мое обещание неправильно разрешено в компоненте, вызывающем TypeWriter:

export class TypeWriter {

    constructor(t, speed) {
        this.content = t.innerHTML;
        this.t = t;
        this.typeSpeed = speed;
        this.t.innerHTML = '';
    }

    private content: string;
    private cursorPosition = 0;
    private tag = '';
    private writingTag = false;
    private tagOpen = false;
    private typeSpeed = 50;
    private t;

    public type(): Promise<void> {
        return new Promise<void>((resolve) => {
            if (this.cursorPosition >= this.content.length) {
                console.log('done typewriter');
                resolve();
            }

            if (this.content[this.cursorPosition]) {
               // Typewriting logic
            }

            if (++this.cursorPosition <= this.content.length) {
                setTimeout(() => {
                    this.type();
                }, this.typeSpeed);
            }
        });
    }
}

И в компоненте:

  initTypewriter() {
    const typewriter = document.querySelectorAll('[class*="typewriter"]');
    if (!typewriter.length || typewriter.length == 0) { return; }

    const typers: TypeWriter[] = [];
    typewriter.forEach(t => {
      typers.push(new TypeWriter(t, 50));
    });

    typers[0].type().then(() => { console.log('done tw0'); });
    typers[1].type().then(() => { console.log('done tw1'); });
  }

Чего я хотел бы добиться, так это последовательно запускать печатную машинку. Я знаю о reduce() и знаю, как его использовать, но здесь моя проблема в том, что обещание type() кажется, что оно никогда не решается. Моя консоль выводит:

done typewriter
done typewriter

Но я никогда не получаю done twX для вывода на мою консоль, даже если журнал консоли перед отображением resolve() ...

Я здесь что-то упущено?

Answer 1

вам нужно будет выполнять свое обещание каждый раз, когда вы только что сделали в this.cursorPosition >= this.content.length условии

, прежде всего оберните setTimeout обещанием.

const setTimeoutProm = (delay) => new Promise(res => setTimeout(() => res(),delay))

, затем измените ваше type() метод,

public type(): Promise<void> {
        return new Promise<void>((resolve) => {
            if (this.cursorPosition >= this.content.length) {
                console.log('done typewriter');
                resolve();
            }

            if (this.content[this.cursorPosition]) {
               // Typewriting logic
               // maybe resolve() 
            }

            if (++this.cursorPosition <= this.content.length) {
                setTimeoutProm(this.typeSpeed).then(() => { 
                   return this.type();
                }).catch(err => { })
            }
        });
    }