Почему setTimeout уходит в too much recursion?

Question

[dicem]

Имеется следующий метод во Vue:

submitComment(event) {
            if (event) {
                event.preventDefault();
            }

            // Включаем прелоадер
            this.sendingComment = true;

            if (!this.stateForumCommentLoader) {
                // Данные на отправку
                const data = {
                    text: this.commentText,
                    parent_id: this.parentComment ? this.parentComment : null,
                    file_id: this.fileId,
                };

                axios.post(this.$store.getters.postTopicCommentAPI(this.forumId), data)
                    .then(res => {
                        const commentData = res.data.data;

                        // Добавляем набор реактивных данных для нового комментария
                        this.$set(commentData, 'showFeedback', false);
                        this.$set(commentData, 'isEdit', false);
                        this.$set(commentData, 'showText', true);
                        this.$emit('pushAnswer', commentData);
                        this.$emit('watch-all');

                        this.commentText = '';

                        setTimeout(() => {
                            $('html,body').animate({ scrollTop: $(`#comment-${commentData.id}`).offset().top }, 1000);
                            this.$emit('closeAnswerFeedback');
                        }, 500);
                    })
                    .finally(() => {
                        this.sendingComment = false;
                        localStorage.removeItem('notFinishedComment');
                    });
            } else {
                setTimeout( this.submitComment(), 1500);
            }
        },

В самом конце я явно указал, что ждать перед запуском 1500 мс, но в итоге это просто игнорируется и выполняется все моментально не дожидаясь пока эти самые секунды пройдут. Почему так происходит?

Answer 1

[Alex]

setTimeout( () => this.submitComment(), 1500);

Comments

[dicem]

Храни тебя господь, как же оперативно. Спасибо!

[dicem]

А почему так происходит не в курсе случаем? Почему если мы не в контексте функции это все передаем, то он игнорит таймер?

[Шохрух Шаймардонов]

dicem, вам надо почитать как работаю таймеры в js

[dicem]

Шохрух Шаймардонов, та я вот почитал на learn.javascript и так нихрена и не понял (касательно моей проблемы) от чего сюда и написал, может если у вас есть ссылка или источник на какой нибудь ресурс с такими подводными камнями, был бы рад прочитать. Буду очень благодарен.

[Шохрух Шаймардонов]

dicem, ну чаще всего обращаюсь к MDN

[Alex]

dicem, Дело в том, что в таймер вы передаёте не функцию а результат её выполнения
Это то же самое, если бы вы написали:

const result = this.submitComment()
setTimeout( result, 1500);

Соответственно браузер моментально выполняет функцию, и уже результат пытается передать в таймер.

[Alex]

dicem, То есть

function SomeJob() {}

setTimeout( SomeJob, 1000 ) // Передать в таймер функцию
setTimeout( SomeJob(), 1000 ) // Выполнить функцию и передать в таймер то, что она возвращает

[dicem]

Alex, Большое спасибо за объяснение!

Answer 2

[Александр Черемхин]

...
} else {
   setTimeout( this.submitComment(), 1500);  //  !!! this.submitComment() - вызывается сразу
}
....

видимо надо
setTimeout( ()=>this.submitComment(), 1500); //

Comments

[dicem]

Храни тебя господь, как же оперативно. Спасибо!