【転載】js解決同期取得非同期方法戻り値問題

2109 ワード

先端

この文章は全面的すぎて、ブロガーはシナリオ*家のアカウントがないので、無断で転載しました.でも、上手に書いていますので、参考にしたいです.https://www.jb51.net/article/100661.htm

    JavaScript        ？

1.    

      ，      ：（ps:        ）


function getSomething() {
 var r = 0;
 setTimeout(function() {
 r = 2;
 }, 10);
 return r;
}

function compute() {
 var x = getSomething();
 alert(x * 2);
}
compute();


2.    

     4，  0，           ，

        ：


function getSomething(cb) {
 var r = 0;
 setTimeout(function() {
 r = 2;
 cb(r);
 }, 10);
}

function compute(x) {
 alert(x * 2);
}
getSomething(compute);


3.promise

          ，             。        ！！      promise     ，               ，    promise：


function getSomething() {
 var r = 0;
 return new Promise(function(resolve) {
 setTimeout(function() {
  r = 2;
  resolve(r);
 }, 10);
 });
}

function compute(x) {
 alert(x * 2);
}
getSomething().then(compute);


promise        ，            。

4.generator

        generator，             ，       ：


function getSomething() {
 var r = 0;
 setTimeout(function() {
 r = 2;
 it.next(r);
 }, 10);
}

function *compute(it) {
 var x = yield getSomething();
 alert(x * 2);
}
var it = compute();
it.next();


     ，        ，        。

5.promise + generator

     promise generator，         ，         （    ，               ）：


function getSomething() {
 var r = 0;
 return new Promise(function(resolve) {
 setTimeout(function() {
  r = 2;
  resolve(r);
 }, 10);
 });
}

function *compute() {
 var x = yield getSomething();
 alert(x * 2);
}
var it = compute();
it.next().value.then(function(value) {
 it.next(value);
});


6.async

         ，     es7       :async。

        ，         ：（ps:         ）


function getSomething() {
 var r = 0;
 return new Promise(function(resolve) {
 setTimeout(function() {
  r = 2;
  resolve(r);
 }, 10);
 });
}

async function compute() {
 var x = await getSomething();
 alert(x * 2);
}
compute();

           。（ps: ~~~~~）

viewportとelementのサイズと位置の整理方法