Почему мой код JavaScript не выполняется в том порядке, в котором он был написан [дубликат].

Я работаю над веб-приложением для знакомств, используя Django. На одной из вкладок приложения отображаются профили возможных кандидатов на свидание, по одному профилю за раз. Когда пользователь нажимает на кнопку like на одном из профилей, пост-запрос отправляется на сервер с помощью fetch, лайк добавляется в базу данных, и код проверяет, есть ли совпадение или нет между пользователем и человеком (python). Если совпадение есть, я хочу скрыть профиль человека и отобразить div с сообщением, подтверждающим совпадение (JavaScript). Идея заключается в том, чтобы это сообщение отображалось в течение нескольких секунд, а затем страница обновлялась и переходила к следующему профилю.

Мой код выполняется неправильно. После нажатия на кнопку "Мне нравится", профиль человека отображается в течение нескольких секунд, затем я вижу сообщение в течение доли секунды, и страница переходит к следующему профилю

Как я могу заставить этот код выполняться в соответствии с моими требованиями?

Вот код:

function wait(ms){
    var start = new Date().getTime();
    var end = start;
    while(end < start + ms) {
      end = new Date().getTime();
    }
}


function submitLike() {
    fetch(`/love/like/${this.dataset.id}`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrftoken
        }
    })
    .then(response => response.json())
    .then(result => {
        console.log(result);

        if (result.match) {
            document.querySelector('#candidate_container').style.display = 'none';
            document.querySelector('#match_container').style.display = 'flex';

            wait(4000);
        }

    })

}

{% for candidate in candidates_list %}
        {% if forloop.first %}
            <div id="candidate_container">
                <div><div id="candidate">{{ candidate }}</div></div>
                <div id="like_dislike">
                    <a id="dislike_btt" data-id="{{ candidate.id }}" href=""><img id="dislike_img" src="{% static 'love/dislike.jpg' %}"></a>
                    <a id="like_btt" data-id="{{ candidate.id }}" href=""><img id="like_img" src="{% static 'love/like.jpg' %}"></a>
                </div>
            </div>

            <div id="match_container">
                <div id="match_message">You Have a match!</div>
                <div id="match_users">{{ user.username }} x {{ candidate }}</div>
            </div>

        {% endif %}
{% endfor %}

Спасибо!

Вернуться на верх