JavaScriptのコールバック/プロミスまたはグローバル変数の代替手段

Question

私の質問は、コールバック/約束またはグローバル変数の代わりのスマートな解決法です。

状況：私はイベント駆動のプログラムを持っています。私は関数Aが後で必要となる値vを計算することを知っています。 Aはプログラムの開始時に呼び出されます。機能Bは、後でイベントによってトリガーされる場合とされない場合があります。

質問：BはAではなく、いくつかのイベントによって呼び出されることはありませんので、私は、コールバックを使用せずにBへAからvを渡すことができますどのように。グローバル変数（since they are bad）の使用を避けるにはどうすればよいですか？

Answer 1

最善の選択肢は2つの機能が共有できるという変数で、閉じた範囲を持つことです。

var B, A; 
 
(function() { 
 
    //Local scope variable that is only accessible in this scope 
 
    var v = 1; 
 
    //Define function B 
 
    B = function B() { 
 
    console.log("v is", v); 
 
    }; 
 
    //Define function A 
 
    A = function A() { 
 
    setTimeout(function() { 
 
     v++; 
 
     console.log("A has changed the value of v"); 
 
    }, 1000); 
 
    }; 
 
})(); 
 
A(); // --> Start A, which modifies the local variable v 
 
B(); // --> Start B before A has finished. B logs current value of local variable v 
 
setTimeout(function() { 
 
    B(); // --> Start B after A has finished. B logs current value of local variable v 
 
}, 2000);

Answer 2

あなたはクロージャを使用することができます。つまり、valは機能Aの範囲内にあり、イベントリスナーは機能A内から「登録」することができます。valは閉鎖されているため、イベントリスナーからもアクセスできます。

function A(n) { 
 
    var but = document.getElementById("me"), 
 
     res = document.getElementById("result"), 
 
     val = Math.floor(Math.random() * n) + 1; 
 
    but.addEventListener("click", function(e) { 
 
            res.textContent = val; 
 
            res.style.backgroundColor = '#' + Math.random().toString(16).substr(-6); 
 
           }); 
 
} 
 

 
A(100);

<script src="index.js" defer></script> 
 
<label for="me">To get the ready value please click</label> 
 
<button id="me">me..!</button> 
 
<p id="result"></p>

あなたは値が最初に1度だけ同期して計算されますが、背景色が毎回計算されて見ての通り。