MozillaのWebExtension APIストレージ - ブレークポイントとないデバッグは異なる出力に私はMozillaの-Firefoxブラウザ用アドオンを実装しようとしています

Question

こんにちはみんな、
をリードしています。 次のスクリプトは、すでに正常に統合された1つのバックゴンドスクリプトを示しています。 Mozilla WebExtension APIストレージを使用します。それは実行されますが、ブラウザコンソールのログが私を驚かせます。 私は交互に何も記録されません取得し、：

：

bla 
bla 
bla 

あれば、私はデバッグモードでの私のコードの重要な行（特に最後の5行）にブレークポイントを設定した場合にのみ、私はいつも期待される結果を得ます

bla 

出力はブレークポイントの設定に依存します。 私は何が起こっているのか分かりませんし、インターネット上で同様の問題を見つけることはできません。誰かが私に何が起こっているのか、間違った出力を防ぐために何ができるのかを私に説明することはできますか？

storeManager.js：

var localStore = chrome.storage.local; 
var StoreManager = function(){}; 

StoreManager.prototype.addItem = function(type, item){ 
    var thisRef = this; 

    localStore.get(type, 
     function(obj){ 
      if(chrome.runtime.lasterror){ 
       console.log(chrome.runtime.lastError); 
      }else{ 
       var oldArr = obj[type]; 

       if(oldArr === undefined) 
        oldArr = []; 

       if(oldArr.indexOf(item) !== -1) 
        return; 

       oldArr.push(item); 
       thisRef.setItem(type, oldArr); 
      } 
     } 
    ); 
} 

StoreManager.prototype.removeItem = function(type, item){ 
    var thisRef = this; 

    localStore.get(type, 
     function(obj){ 
      if(chrome.runtime.lasterror){ 
       console.log(chrome.runtime.lastError); 
      }else{ 
       var oldArr = obj[type]; 

       if(oldArr === undefined) 
        return; 

       var index = oldArr.indexOf(item); 
       if(index === -1) 
        return; 

       oldArr.splice(index, 1); 
       thisRef.setItem(type, oldArr); 
      } 
     } 
    ); 
} 

StoreManager.prototype.setItem = function(type, item){ 
    localStore.set({ [type] : item }, 
     function(){ 
      if(chrome.runtime.lasterror){ 
       console.log(chrome.runtime.lastError); 
      } 
     } 
    ); 
} 

StoreManager.prototype.visitItems = function(type, visit){ 
    localStore.get(type, 
     function(obj){ 
      if(chrome.runtime.lasterror){ 
       console.log(chrome.runtime.lastError); 
      }else{ 
       var oldArr = obj[type]; 

       if(oldArr !== undefined){ 
        for(var i=0; i<oldArr.length; i++){ 
         visit(oldArr[i]); 
        } 
       } 
      } 
     } 
    ); 
} 

function justLog(str){ 
    console.log(str); 
} 

var sm = new StoreManager(); 
sm.visitItems("lol", justLog); 
sm.addItem("lol", "bla"); 
sm.visitItems("lol", justLog); 
sm.removeItem("lol", "bla"); 
sm.visitItems("lol", justLog); 

manifest.jsonを：

{ 
    "manifest_version": 2, 
    "name": "Addon", 
    "version": "0.0", 

    "description": "no desc", 

    "background": { 
     "scripts": [ 
      "storeManager.js" 
     ] 
    }, 

    "permissions": [ 
     "storage" 
    ] 
} 

Answer 1

storage.local.set()が非同期です。コールバックが呼び出されるまで（またはbrowser.storage.localを使用する場合、set()はPromiseを返し、そのプロミスが解決したときにデータが書き込まれることが保証されます）、データはget()の呼び出しで表示されることが保証されていません。

あなたのコードは、本質的に競合状態に満ちています。 addItem()とremoveItem()へのコールは、visitItems()へのコールに対して競合しています。ブレークポイントを設定することで、一方のパスまたは他方のレースにレースを勝利させることができます。

確定的な結果が期待される場合は、storage.localのPromiseバリアントを使用し、コードを一連の連鎖ハンドラとして記述することをお勧めします。