Поясните про async/await

250

28 июня 2017, 01:20

Здравствуйте.

<!DOCTYPE html>
   <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Async</title>
      </head>
      <body>
        <div id="app"></div>
         <script>
           console.time("await");
          function loadImage(url){
           let app = document.getElementById('app');
           let img = document.createElement('img');
           img.setAttribute('src', url);
           img.addEventListener('error', ()=>{console.log('ошибка'); img = null; });
           img.addEventListener( 'load', ()=>{console.log('загрузился я');                  setTimeout(()=>{app.appendChild(img)},2000);});
          }; loadImage('3.jpg');
         async function getNumber(N=100000){
           let f = (N)=>{ let S=0; for(let i=0; i<N; i++) S=Math.sqrt(S+i)/4; return S; }
           let S1 = await f(N);
           let S2 = await f(N);
           let S3 = await f(N);
           let S4 = await f(N);
           console.log( S1/2 - S2/4 - S3/8 - S4/16);
         }
      getNumber(1000000000);
      console.timeEnd("await")
  </script>
 </body>
</html>

По-идее, я так полагал, что картинка должна загружаться не дожидаясь пока выполняются вычисления, но как-то всё грустно оказалось. Ядро тоже только одно загружается. Может я чего неправильно делаю? Или это норм?

Answer 1

await - это про управление ожиданием внешних событий, а не про потоки. Ваш код все еще выполняется в одном потоке, и тяжелые вычисления его блокируют.

Та технология, которая вам нужна, называется WebWorkers.

Answer 2

Что бы async await работал, нужно что бы функция, вызываемая с await, возвращала промис. Я что-то не вижу, что бы loadImage его возвращала.

function loadImage(url){
    return new Promise((resolve, reject) => {
        let app = document.getElementById('app');
        let img = document.createElement('img');
        img.setAttribute('src', url);
        img.addEventListener('error', reject;
        img.addEventListener( 'load', resolve);
        setTimeout(()=>{app.appendChild(img)},2000);});
    });
};