Reload page after message faded out

Question

I want to reload the page after a message is displayed. Here is my code.

ASPX:

<div id="MyMsg" style="display:none;color:red; text-align: center;" runat="server">
    <h2>This card has expired</h2>
    <h2>Please see front desk</h2>
</div>

Javascript:

<script>
    setTimeout(function () {
    $('#MyMsg').fadeOut('fast');
    }, 5000) // <-- time in milliseconds
    window.location.reload();    
</script>

C#:

{
    MyMsg.Style.Add("display", "normal");
    btnSubmit.Enabled = false;
    IDCard.Text = "";
    IDCard.Visible = true;
    IDCard.Focus();
}

Hope someone can point me in the right direction.

How can I reload the page in this script

setTimeout(function () {
    $('#MyMsg').fadeOut('fast');
}, 5000); // <-- time in milliseconds

Should it be like this When i try this the page never starts at all

<script>
//setTimeout(function () {
//    $('#MyMsg').fadeOut('fast');
//}, 5000); // <-- time in milliseconds

const fadePromise = new Promise((resolve, reject) => {
    $('#MyMsg').fadeOut('fast');
    resolve();
});

// Now invoke the fadePromise and use then-block
fadePromise.then(() => {
    window.location.reload();
});

Answer 1

Just put the window reload inside the setTimeout() instead, like so:

<script>
    setTimeout(window.location.reload, 5000);
</script>

Unless fading is mandatory, in which case, you could call the reload function a bit late, like this:

<script>
    // fade after 5 seconds
    setTimeout(() => {
       $('#MyMsg').fadeOut('fast');
    }, 5000);

    // on 6th second, reload the page
    setTimeout(window.location.reload, 6000);
</script>

P.S: I know it has been a month old, but I sincerely hope that this helps you, if you have not found it already on your own :)