편집 기록

프로필 편집요청빌런님의 편집

날짜2023.01.03

hide(), show() 가 동기적으로 작동하지 않는데 문제점을 모르겠습니다.

javascript

dom

asynchronous

jquery

제가 의도하는 방향은 아래와 같습니다. 하지만 코드를 실행하면 3번의 prediction 값이 계산된 후에 2번3번4번이 처리되는 것 같습니다. prediction 값을 계산하는 동안 로딩중이라는 엘리먼트를 잠깐동안 표시했다가 없애고 싶었는데 의도하는데로 처리되지 않네요ㅠ

async 함수에 await가 있으면 동기적으로 실행되다가 await 부분만 처리될때까지 기다리는걸로 알고있는데 그게 아닌건가요,,,?

고수님들의 조언 부탁드립니다..(비전공자 취미 직장인이라 부족한게 많습니다.)

.1. 버튼(#button-confirm)을 클릭하면,

.2. DOM을 조작 후,

$(".select-image").hide();
$("#detected").hide();
$("#loading-predict").show();

. 3. 구글 teachable machine에서 학습된 데이터를 기반으로 predict함수에서 예측

const prediction = await model.predict(image, false);

.4. DOM을 조작

 $(".view-image").fadeIn("900");
 $("#loading-predict").hide();

전체 소스코드

async function predict() {
  // predict can take in an image, video or canvas html element

  $(document).on("click", ".list-image > img", function () {
    $(".list-image > img").each(function () {
      $(this).removeClass("active");
    });
    $(this).addClass("active");
    elementSelected = $(this);
    typeSelected = false;
    $(".view-image-comp > #userPic").attr("src", elementSelected.attr("src"));
  });

  $(document).on("click", "#button-confirm", async function () {
    if (elementSelected !== null) {
      $(".select-image").hide();
      $("#detected").hide();
      $("#loading-predict").show();

      var image = document.querySelector(".view-image-comp > #userPic");
      const prediction = await model.predict(image, false);
#중간생략
      $(".view-image").fadeIn("900");
      $("#loading-predict").hide();
    } else {
      alert("얼굴을 선택해 주세요!");
      return;
    }
});

프로필 HT12kim님의 편집

날짜2022.12.29