Выполняется только первая строка функции

#javascript

#javascript

Вопрос:

У меня есть функция, которая вызывается при отправке моей формы. В зависимости от значения переменной затем вызывается одна из двух функций для обновления моего Firebase Firestore. Проблема, с которой я сталкиваюсь, заключается в том, что выполняется только первая строка (console.log()) для каждой из двух других потенциальных функций. Моя консоль не показывает никаких ошибок.

Это вызывается при отправке формы

 function setSpeakerInfo() {
    var nameField = document.getElementById("name");
    var nameValue = nameField.value.trim();
    if (nameValue) {
        nameField.dataset.state = 'valid';
    } else {
        nameField.dataset.state = 'invalid';
    }

    if (nameField.dataset.state == 'valid') {
        if (docId != null) {
            updateSpeaker();
        } else {
            createNewSpeaker();
        }
    } else {
        alert("You must provide a name!");
    }
}
  

Это две другие функции, которые вызываются в зависимости от того, имеет docId значение null или нет.

 function updateSpeaker() {
    console.log("UPDATE");
    var docRef = db.collection("/annual meeting/speakers/Speakers").doc(docId);
    return docRef.update({
        Name: document.getElementById("name").value,
        Title: document.getElementById("title").value,
        Bio: document.getElementById("bio").value
    })
    .then(function() {
        console.log("Document successfully updated!");
    })
    .catch(function(error) {
        console.error("Error writing document: ", error);
    });
}

function createNewSpeaker() {
    console.log("CREATE");
    db.collection("/annual meeting/speakers/Speakers").add({
        Name: document.getElementById("name").value,
        Title: document.getElementById("title").value,
        Bio: document.getElementById("bio").value,
        Image: ""
    })
    .then(function(docRef) {
        console.log("Document written with ID: ", docRef.id);
    })
    .catch(function(error) {
        console.error("Error adding document: ", error);
    });
}
  

РЕДАКТИРОВАТЬ: Как и было запрошено, вот моя форма.

 <form id="speakerInfo" onsubmit="setSpeakerInfo()">
    <input id="name" type="text" placeholder="Name"><br><br>
    <input id="title" type="text" placeholder="Title"><br>
    <h3>Bio</h3>
    <textarea id="bio" rows="10" cols="40"></textarea><br><br>
    <h3>Image</h3>
    <input id="image" type="file" accept="image/"><br>
    <img id="profileImage" width="25%" height="25%"></img><br><br>
    <input id="submit" type="submit" value="Submit">
</form>
  

Вот моя консоль.
введите описание изображения здесь

Комментарии:

1. можем ли мы увидеть вашу форму?

2. под «выполняется», я полагаю, вы имеете в виду, что вы не видите эффекта этих инструкций, а не то, что они буквально не выполняются? Если вы поставите точку останова в этих строках, я предполагаю, что они действительно вызываются — это верно?

3. я не знаю, но я думаю, что проблема в том, что используемый вами api не настроен на асинхронность, а настроен на синхронизацию, и, проще говоря, это, возможно, слишком медленно

4. Я не вижу эффекта от обновлений firebase, но я также добавил еще одну инструкцию console.log() после первой, и выполняется только первая. После нее ничего.

5. 1. попробуйте поместить console.log() в конце функции (просто чтобы убедиться, что при вызовах не произойдет ничего неправильного. 2. проверьте, были ли проблемы с запросом к вашей базе данных, и был ли он воспроизведен? (можете ли вы добавить время ожидания к вашему запросу?)

Ответ №1:

Я понял, в чем была проблема. Форма перезагружалась до того, как асинхронные методы Firebase могли завершиться.