javascript ajaxのサクセス時にメッセージを出した後リロードを行いたい

Question

ajaxのサクセス時にメッセージを表示させて
その後リロードを行いたいのですが
メッセージが表示の途中でリロードが起きてしまいます。

やりたいこととして
メッセージを表示させフェードアウト
その後リロード
を行う動きに変えたいのですが
どうすれば実装可能でしょうか？？

現在のサクセス時のコード

                success: function(data){
                    $("#message").fadeIn(300).delay(1000).fadeOut(300);
                },
                complete: function() {
                    location.reload();
                }

追記

メッセージが表示の途中とは
メッセージを表示させフェードアウトが完了する前という意味です

今回の質問に特に影響はないと思いましたがajaxの全コードの追記になります。

$.ajax({
                type: "POST",
                url: "//hogehoge/",
                data: {
                    "checks":checks
                },
                success: function(data){
                    $("#message").fadeIn(300).delay(1000).fadeOut(300);
                },
                complete: function() {
                    location.reload();
                }
            });

完了というのは
記載させていただいてありますが
サクセス時の
・メッセージを表示させフェードアウトさせる。
・その後リロード

になります。

Comments

[m.ts10806]

ajax実行のコード全体を追記願います。また「メッセージが表示の途中」とは具体的にどのような状況でしょうか。「メッセージ表示完了」は何を以て「完了」とできますか？トリガーなどはあるのでしょうか。

[amaguri]

ajax実行のコード全体を追記願いますとありましたが、質問の動きに影響ありましたでしょうか？以前質問と関係ないところはできるだけ減らして欲しいとの他者様からの回答もありましたので割合させていただきましたので次からは全部記載したいと思います

[amaguri]

また「メッセージが表示の途中」とは具体的にどのような状況でしょうか。「メッセージ表示完了」は何を以て「完了」とできますか？トリガーなどはあるのでしょうか。　　　こちらに関してはこちらの説明力が足りず申し訳ありません。わかっている前提で書いてしまったので他人から見てもわかりやすく書くこと意識したいと思います

Answer 1

非同期が絡むのでwhenで処理してみてはいかがでしょうか？
今回はajaxは直接関係ないのでボタンを押させてみました

<script>
$(function(){
  $('input[type=button][value=test]').on('click',function(){
    $.when($("#message").fadeIn(1000).delay(1000).fadeOut(1000)).done(function(){
    alert("test");
    });
  });
});
</script>
<div id="message" style="display:none">test</div>
<input type="button" value="test">

Comments

[amaguri]

https://www.tam-tam.co.jp/tipsnote/javascript/post5807.html
みてみました!
こういう書き方もあるのですね
コールバックにて解決も回答いただきましたが
今回の場合どちらの実装のが望ましいのでしょうか？

[yambejp]

delayとqueueはセットなのでdelayで処理するならqueueの方が
使いやすいと思います
whenは汎用的な遅延処理まちです

[amaguri]

解説ありがとうございます！
queueの方で実装してみたいと思います。

Answer 2

$("#message").fadeIn(300).delay(1000).fadeOut(300).queue(function() 
{
   location.reload();
});

コールバックに書いてみてはどうでしょうか？

Comments

[amaguri]

コールバックで書いてみるというのはすごくイメージしやすかったです！
試してみたいと思います！

Answer 3

                success: function(data) {
                    $("#message").fadeIn(300).delay(1000).fadeOut(300).queue(function()
                    {
                        location.reload();
                    });
                }

いただいた回答より
このようにソースを変更し解決できました。
ありがとうございました。