JavaScriptで意図しない返り値を取得してしまう(Ajax)

Question

フォームの値のチェックをJavaScriptにて行っているのですが、Ajax通信の結果を待つことなく値を返してしまいます。

function check(){
            //idが使用されているか
            isUsedAPI(username).done(function(result) {
                message = result["Message"]
                if (message != "NOTUSED") {
                    if (message == "ERROR") {
                        $(".message").html(result["Err"]);
                        return false
                    }
                    $(".message").html("そのIDはすでに使用されています");
                    return false
                }
                return true
            }).fail(function() {
                $(".message").html("通信エラー");
                return false
            })
}
function isUsedAPI(id)
{
    return $.ajax({
        url: "http://localhost:8080/isUsed",
        type: "POST",
        dataType: 'json',
        data: {
            userid: id
        },
        timespan: 1000
    })
}

            <form action="create.php" method="POST">
                ユーザー名
                <input id="user" type="text" name="userid" class="input">
                ニックネーム(公開される名前)
                <input id="nick" type="text" name="nickname" class="input">
                パスワード
                <input id="pass" type="password" name="password" class="input">
                パスワード(確認)
                <input id="repass" type="password" class="input">
                <button type="submit" class="loginbutton" onclick="return check()">登録</button>
            </form>

これを実行するとisUsedAPI()の結果に関わらずリクエストが行われてしまいます
ご教授お願いします

Comments

[m.ts10806]

これは何を参考に作られましたか？
通常は、ajaxの流れの中でdoneするものかと思いますが。

[bonokame]

回答有り難うございます
https://tkmr.hatenablog.com/entry/2014/08/08/084755
こちらのサイトを参考に作りました。

[hentaiman]

jqueryのajaxの動作を勘違いしてるだけな気がする
一度公式でもそこら辺のてきとーなサイトでも良いから動作を再確認するのがいいでしょうね

[bonokame]

他の箇所はこの方式で全て動いてるんですよね..
isUsedAPI().done(){}
の処理を待たずにcheck()が値を返しているのではないかと思います。
check()にisUsedAPI().done(){}の処理を待ってもらうことはできないのでしょうか?

[hentaiman]

とりあえず、非同期処理のajaxの書き方調べれば期待した処理を作れると思いますよ。参考サイトにも書いてありますが。
ですが勘違いや間違った理解は正した方が「たまたまうまく動いた」というのを避けられるので前述の通り動作の再確認をお勧めします。

[bonokame]

問題は解決したのですが、まだajaxの非同期処理については十分理解していなかったのでこれを機に復習してみようと思います。丁寧なご回答ありがとうございました。

Answer 1

非同期通信の Promise 中で return をしても check() の返り値にはならず、
Formの送信はキャンセルできないので、やりたいことはおそらくこんな感じなのかと思います

function check(event){
    event.preventDefault(); // Form の送信をキャンセル

    isUsedAPI(username).done(function(result) {
        message = result["Message"]
        if (message != "NOTUSED") {
            if (message == "ERROR") {
                $(".message").html(result["Err"]);
                    return // 何もしない
                }
                $(".message").html("そのIDはすでに使用されています");
                return // 何もしない
            }
            $('#form').submit(); // Form の submit 実行。<form id="form"> のように id なり何なりでアクセスできるようにする必要があります。
    }).fail(function() {
       $(".message").html("通信エラー");
       return // 何もしない
    })
}

Comments

[bonokame]

ありがとうございます！
この手法で意図した処理ができるようになりました...!