マップループで約束している

Question

このトピックにはたくさんの記事がありますが、わかりませんでした。私はこのすべての約束事に慣れていませんが、解決する必要がある特定の問題があります。下のコードでは、配列 'fnFoes'をループし、このfnFoes内で別の配列 'avatar'をトラフします。アバターの各要素に対して、indexedDBのsvg-Codeが読み込まれ、htmlに追加されます。私の問題は次のとおりです。この関数は、関数を終了して次の関数に進む前に、すべてのsvgを完全にロードして追加します。

私はpromisに関数全体をラップしようとしましたが、すべてのsvgをロードする前にまだ続きました。私はこれがindexedDBと関係があると仮定しますが、正直なところ、私はそれを取得しません。

投稿の2日後、試行錯誤の後、どんな助力も大変ありがとうございます！ Thxを フリッツ

$.map(fnFoes, function(i,obj){ 
     console.log(obj); 
     console.log('loadAllAvatars: checking foe: ' + obj); 

     if (!(obj in foes) || fnFoes[obj].avatar != foes[obj].avatar || document.getElementById(obj) === null){ // compare avatar information of both variables. if changed, render new 
      console.log('loadAllAvatars: foe '+ obj +' will be rendered'); 
      foeRenderIds.push(obj); // push foe id in list 
      if (obj in foes) { 
       foes[obj].avatar = fnFoes[obj].avatar; // change avatar items in foes; 
      } 

      var avatar = fnFoes[obj].avatar.split(','); // split avatar string in array 
      console.log(avatar); 
      console.log(fnFoes[obj]); 
      if (document.getElementById('#'+obj)){ // if foe div already exists in avatarDoubles, just delete it 
       $('#'+obj).html(); // delete old avatar from doubles 
      } else { 
       var html ='<div id="foe' + obj + '"></div>'; // if avatar doesn't exist, create it in avatarDoubles 
       $('#avatarDoubles').append(html); 
      } 

      //render avatar 
      if (typeof avatar !== 'undefined' && avatar.length > 1) { 
       $.map(avatar, function(j,key){ 
        console.log(avatar[key]); 
        var name = avatar[key]; 
        db.svgs.get(name).then(function(obj2){ 
         var html = "<div class='" + obj2.category + "' data-name='" + obj2.name + "' data-category='" + obj2.category + "'>" + obj2.svg + "</div>"; 
         $('#foe' + obj).append(html); 
         console.log(obj2.name); 
        }); 

       }); 
      }     
     } else { 
      console.log('loadAllAvatars: foe '+ obj +' already exists'); 
     } 
}); 

Answer 1

私はあなたのコードを理解するのに苦労していますが、あなたは、おそらくこのような何かしたい：

function connect() { 
    return new Promise(function(resolve, reject){ 
    var request = indexedDB.open(); 
    request.onsuccess =() => resolve(request.result); 
    }); 
} 

function dothings(db, things) { 
    var promises = []; 
    for(var thing of things) { 
    var promise = dothing(db, thing); 
    promises.push(promise); 
    } 

    return Promise.all(promises); 
} 

function dothing(db, thing) { 
    return new Promise(function(resolve, reject) { 
    var tx = db.transaction('svgs'); 
    var store = tx.objectStore('svgs'); 
    var request = store.get(thing); 
    request.onsuccess =() => resolve(request.result); 
    }); 
} 

function foo() { 
    var things = getthings(); 
    connect().then(function(db) { 
    return dothings(db, things); 
    }); 
}