Почему код выполняется без задержки?

Question

[ioriSempai]

Есть класс, который должен добавлять элемент текста по определенно заданной задержке. Проблема заключается в том, что вывод то работает, и console.log выводит все прекрасно, а сам вид на сайте не работает (поэтапно). Вопрос - почему?

export class typeSymbols {
    constructor(title, duration) {
        this.$title = document.querySelector(title)
        this.$duration = duration
        
        this.outWidth()
    }

    outWidth() {
        this.$upBlock = this.$title.parentNode

        if (document.readyState === "interactive") {
            this.$upBlock.classList.add("anim-width")
            setTimeout(this.deleteAnim.bind(this), this.$duration)
        }
    }

    deleteAnim() {
        this.$upBlock.classList.remove("anim-width")
        this.checkOut()
    }

    checkOut() {
        this.$title.style.opacity = 100
        this.$mainTitle = this.$title.textContent
        this.$title.textContent = ''
        
        for(let i = 0; i < this.$mainTitle.length; i++) {
            setTimeout(type.bind(this), 1000)
            function type() {
                this.$title.innerHTML = this.$title.textContent + this.$mainTitle[i]
                console.log(this.$mainTitle[i])
            }
            
        }
    }
}

И вот сам выходной файл код
const title = new typeSymbols('.main-title', 800)
И вот HTML

<div class="header-title">
            <img src="./img/heart.svg" alt="">
            <h1 class="main-title" style="opacity: 0;">Text</h1>
     </div>

Answer 1

[Александр]

this.$duration попробуйте заменить на this.duration
И проверьте доходит вообще заданной время до вашеuj if (document.readyState === "interactive")