Svelte 没有在有条件的情况下显示微调器答案

【问题标题】：Svelte doesn't show the spinner in a conditionalSvelte 没有在有条件的情况下显示微调器
【发布时间】：2021-10-29 15:38:35
【问题描述】：

我有一个微调器组件，我已经在 if 条件之外对其进行了测试。它完美地工作。但是，当我像下面的代码一样将它放在 if 条件中时，它根本不显示。我做错了什么？

我还尝试使用$: 语法来使微调器变量反应。运气不好！

    let email = 'example@blah.com'
    let password;
    let newEmail;
    let passwordEntered;
    let emailChanged = false;
    let spinner = false;
    let error = false;  

    function cancel() {
        // Dispatch code
    }

    function updateEmail() {
        spinner = true;
        error = false; // Reset this to default

        // The code that actually updates the email goes here
        updateEmailonFirebase();

        // Error handling code
        
        // Once the email is updated, hide the spinner.
        spinner = false;
    }
</script>

<div>    
    {#if !emailChanged}
    
        {#if !passwordEntered}
            <label for="password">Please enter your password for verification</label>
            <input id="password" type="password" bind:value={password} />
            <div>
                <button on:click={cancel}>Cancel</button>
                <button on:click={() => (passwordEntered = true)}>Next</button>
            </div>
        {:else if passwordEntered && !spinner}
            <input id="newEmail" type="email" bind:value={newEmail} />
            <div>
                <button on:click={cancel}>Cancel</button>
                <button on:click={updateEmail}>Next</button>
            </div>
        {:else if passwordEntered && spinner}
            <Spinner />
        {/if}

    {:else if emailChanged}
            <p>Your email has been changed!</p>
            <!-- Using cancel here because it does the same thing -->
            <button on:click={cancel}>Go back</button>

    {/if}
</div>

【问题讨论】：

需要更多细节。目前我看到updateEmail 是一个同步函数，它将spinner 设置为true 然后返回false，这实际上是无操作的。为什么这样？看起来很可疑。
我删除了更新电子邮件的代码。这是标准的 Firebase 电子邮件更新函数调用。我删除了它，因此它不会将焦点从问题上移开。我现在已经更新了。
好吧，那很明显，正如我所说，更改为spinner 是无操作的，spinner 是错误的，因此您看到的行为。
看来你需要了解一下js中的异步调用。搜索关键词：“js async-await”、“js async execution”、“js promise”等
更清楚地说，'updateEmailonFirebase()' 看起来像一个异步调用。您的代码当前正在立即执行下一行 (spinner = false)，而不是等待更新调用完成。如果允许，您需要在updateEmailonFirebase() 回调中更新spinner，或者重写以使用异步等待

标签： javascript svelte reactive svelte-component sveltekit

【解决方案1】：

通过根据 cmets 在 firebase 函数调用前面添加 await 关键字来解决此问题。

await updateEmailonFirebase();

我忘了这是一个异步函数调用。

谢谢大家。

【讨论】：