[Java Script] 오래걸리는 함수 기다렸다 실행시키기 async, await

Java Script를 사용하다 보면 기능을 하나씩 수행했을때에는 잘 작동하지만 합쳐서 실행할때에 오류가 발생하는 경우가 있다. 이는 하나의 함수가 다 실행하기전 다른 함수가 실행되기 때문에 발생하는 문제이다.

 

 

예를들어 보겠다.

아래에 보이는 코드는 1번 함수 실행 후 가져온 값이 있어야 2번 함수를 실행 시킬수 있다. 즉 1번 함수가 끝난 후 2번함수가 실행 되어야 한다는 것이다. 이러한 작업을 해주는것이 async, await 이다. 

 

1번 함수

async function init() {
  const modelURL = URL + 'model.json';
  const metadataURL = URL + 'metadata.json';

  // load the model and metadata
  // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
  // or files from your local hard drive
  // Note: the pose library adds "tmImage" object to your window (window.tmImage)
  model = await tmImage.load(modelURL, metadataURL);
  maxPredictions = model.getTotalClasses();
  labelContainer = document.getElementById('label-container');
  for (let i = 0; i < maxPredictions; i++) {
    // and class labels
    labelContainer.appendChild(document.createElement('div'));
  }
}

 

2번 함수

// run the webcam image through the image model
async function predict() {
  // predict can take in an image, video or canvas html element
  var image = document.getElementById('face-image'); //html에 face-image라는 ID를 가지고 있는 값을 image에 넣는다.
  const prediction = await model.predict(image, false);
  for (let i = 0; i < maxPredictions; i++) {
    const classPrediction =
    	prediction[i].className + ': ' + prediction[i].probability.toFixed(2);
    labelContainer.childNodes[i].innerHTML = classPrediction;
  }
}

 

 

async, await를 이용하여 함수를 작성하면 then이라는 기능을 이용할 수 있다. 아래와 같이 코드를 작성하면 init함수가 모두 실행 된 후에 predic함수를 실행한다는 문장이 만들어 진다.

init().then(()=>{
predict();
})