Hide(), show() does not work synchronously, so I don't know the problem.

The direction I intend is as follows. However, when the code is executed, it seems that number 2, number 3, and number 4 are processed after calculating the prediction value of number 3. While calculating the prediction value, I wanted to mark and remove the element loading for a while, but it didn't work as intended<

If there is an awit in the async function, it runs synchronously and waits until only the awit part is processed, but is that not it...?

Please give me advice from masters.(Non-majors' hobbies are office workers, so there's a lot to be desired.)

1. When you click the button (#button-confirm),

2. After operating the DOM,

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

3. Predict based on data learned from Google teachable machine in predict function

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

4. Operation of 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);
#Middle omission
      $(".view-image").fadeIn("900");
      $("#loading-predict").hide();
    } } else {
      alert("Please select a face!");
      return;
    }
});

javascript dom asynchronous

2023-01-02 16:03

1 Answers

I haven't used J-Query, but looking at the code, I think you're using J-Query.

If you don't give the hidden and show values, I think it's because the default duration value is 400.

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

I'd like you to write it like this.

2023-01-02 20:58

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656