Почему TypeScript срабатывает только после обновления страницы?

Question

[Andrew]

Есть страница диалоги и сообщения, как в телеге выглядит все почти, так вот, когда нажимаешь на чат, ты можешь нажать на звездочку в хедере и добавить в избранное(появляется звезда на диалоге, но при нажатии ничего не происходит, а если обновить страницу, то звездочка появляется. Т.е я вызываю скрипт, он срабатывает и передает в базу, но не показывает его на экране, почему?
Вот код:

static setStar() {

//
let chat_id = A.dialogs._cache.getActiveChatId();

//
let is_favorite = A.dialogs._cache.getStar(chat_id);
//
let ar_post = {
chat_id: chat_id
};

// если значение is favorite равна нулю то
if (is_favorite == 0) {

// обновляем кэш
A.dialogs._cache.setStar(chat_id, 1);

//обращаемся к бэкэнду к чату и классу
API.call('chats/addToFavorite', ar_post);

// делает звезду видомой убирая класс хидден
$('path_dialog_item_star' + chat_id).removeClass('hidden');

}
// если значение is favorite равна одному то
if (is_favorite == 1) {

// обновляем кэш на 0, если равна 1
A.dialogs._cache.setStar(chat_id, 0);

// вызываем апи на удаление звезды избранного
API.call('chats/doRemoveFromFavorite', ar_post);

// делает звезду невидомой добавляя класс хидден
$('path_dialog_item_star' + chat_id).addClass('hidden');
}

}

эта функция прописана в HTML в хедере вот так:

И так же прописано в dialog_item.ejs, что бы звездочка высвечивалась на самом диалоге

Comments

[Владислав Лысков]

какой ужас, на тайпскрипте пишете, а нормально вставить код не можете

Answer 1

[Алексей Ермолаев]

Ну, во-первых, typescript здесь вообще ни при чем, так как он компилируется в Js.
Во вторых, значение переменной is_favoutite нигде не перезаписывается по коду, а берётся в начале из некого «кэша». В третьих, вы совершаете асинхронную операцию - запрос к бэкэнду на изменение данных, но при этом не пытаетесь даже никак обработать результат этого запроса - колбэк добавить какой нибудь, в промис завернуть, async/await заиспользовать, что тоже промисы, но под капотом.
При таких операциях ответ приходит не сразу же, а через какое то время, поэтому по классике в методы, которые совершают асинхронные операции, добавляют коллбэки - функции, которые могут принять результат и его обработать.
Советую почитать про event loop, промисы, вообще про асинхронность в js. Ну или для начала хотя бы лучше узнать api инструмента, которым пользуетесь, а именно jquery и метод ajax, хотя бы.