jqueryでload命令が完了するまで処理を停止させたい

Question

お世話になります。

$("#test_contents")
  .load("/public/lib/add_load_test_contents.html");

共通のjs処理に書かれたload命令なのですが、#test_contents要素へのload処理が完了するまで、後続の処理を停止させたいのですが、記述方法がわかりません。
（#test_contents要素は必ずあるわけではない）

sleepで固定時間止める方法は、諸事情により避けたいです。

よろしくお願いいたします。

Comments

[Lhankor_Mhy]

コールバックではダメなのですか？

[hiro_app]

ありがとうございます。
このload以降の処理は、#test_contents要素有り無しに関係なく共通の処理が続きます。
ですので、loadのコールバック内に、その全てを持ってくるのは避けたいという理由があります。

やろうと思えばできるけど、簡易な実現方法としてはコールバックが適切ということでしょうか？

[hiro_app]

念の為仰っているコールバックとは、↓の認識であっていますか？
$("#test_contents").load("/public/parts/add_load_test_contents.html", function(){ /*after処理*/ });

[Lhankor_Mhy]

なるほど、その要素がない場合にコールバックが走らないのがまずい、ということなのですね。

[hiro_app]

その通りです。
とはいえ、if文で助長な書き方になり、ソースが汚くなるのも避けく思い。
load時に読み込み終了まで処理が止まれば解決するのでは？と思い、質問させて頂きました。

Answer 1

試した限りでは、.promise()メソッドで Promise を返せば、その要素がなくてもコールバックが走るようです。
.promise() | jQuery API Documentation

$("#test_contents")
  .load("/public/parts/add_load_test_contents.html").promise().then(()=>{
  // 後続の処理
  })

---

書き方としてのコールバックを避けたいのであれば、await を使うのもいいのかもしれないです。

<script type="module">
  await $("#test_contents")
    .load("/public/parts/add_load_test_contents.html").promise()
  // 後続の処理
</script>

Comments

[hiro_app]

awaitがありましたね！
ありがとうございます。

Answer 2

$.ajaxで読み込んでdone以降で処理すればよいのでは？

$(function(){
  var url="/public/parts/add_load_test_contents.html";
  $.ajax({
  url:url,
  dataType:'html',
  }).done(function(html){
    $("#test_contents").html(html);
    console.log("後続処理");
  });
});