Viewing: ja.javascript.info

promise

JavaScript

1 setTimeout

src loadScript(src) :

          function loadScript(src) {
  // <script> 
  //  src 
  let script = document.createElement('script');
  script.src = src;
  document.head.append(script);
}
        

src <script src="">

          // 
loadScript('/my/script.js');
        

loadScript

          loadScript('/my/script.js');
// loadScript 
// 
// ...
        

loadScript() :

          loadScript('/my/script.js'); //  "function newFunction() {}" 

newFunction(); // !

loadScript

loadScript 2 callback :

          function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;

  script.onload = () => callback(script);

  document.head.append(script);
}
        

callback :

          loadScript('/my/script.js', function() {
  // 
  newFunction(); // 
  ...
});
        

function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;
  script.onload = () => callback(script);
  document.head.append(script);
}

loadScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', script => {
  alert(`Cool, the ${script.src} is loaded`);
  alert( _ ); // 
});

callback

loadScript

Callback callback

: 2

2 loadScript callback :

          loadScript('/my/script.js', function(script) {

  alert(`Cool, the ${script.src} is loaded, let's load one more`);

  loadScript('/my/script2.js', function(script) {
    alert(`Cool, the second script is loaded`);
  });

});
        

loadScript loadScript

          loadScript('/my/script.js', function(script) {

  loadScript('/my/script2.js', function(script) {

    loadScript('/my/script3.js', function(script) {
      // ...
    });

  })

});

loadScript :

function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;

  script.onload = () => callback(null, script);
  script.onerror = () => callback(new Error(`Script load error for ${src}`));

  document.head.append(script);
}

callback(null, script) callback(error)

          loadScript('/my/script.js', function(error, script) {
  if (error) {
    // 
  } else {
    // 
  }
});
        

loadScript

callback callback(err)
2()callback(null, result1, result2)

callback

          loadScript('1.js', function(error, script) {

  if (error) {
    handleError(error);
  } else {
    // ...
    loadScript('2.js', function(error, script) {
      if (error) {
        handleError(error);
      } else {
        // ...
        loadScript('3.js', function(error, script) {
          if (error) {
            handleError(error);
          } else {
            // ... (*)
          }
        });

      }
    })
  }
});
        

1.js
2.js
3.js (*)

...

[]

          loadScript('1.js', step1);

function step1(error, script) {
  if (error) {
    handleError(error);
  } else {
    // ...
    loadScript('2.js', step2);
  }
}

function step2(error, script) {
  if (error) {
    handleError(error);
  } else {
    // ...
    loadScript('3.js', step3);
  }
}

function step3(error, script) {
  if (error) {
    handleError(error);
  } else {
    // ... (*)
  }
};
        

step* 1

1 promise