知りたいこと

動作ケース(B)のときには､なぜbtnAの変数が入った状態で使えるのでしょうか｡
btnAでFormを送信して､そのときにFormという変数でFormオブジェクトを保持して､btnB(確認画面)で送信するボタンがあったとして､送信するボタンを押下した際に保持したFormオブジェクトを使用する用途で副作用などあったりするのでしょうか｡

→ 2つ目の質問は一旦大丈夫です。必要だったら別で質問すると思います。

動作ケース(実例) ※coffeescriptで書いています｡｡

ボタンが2つあります｡

<button type="button" id="btnA">Aボタン</button>
<button type="button" id="btnB">Bボタン</button>

■(A)変数が使い回せないパターン
btnAを押すと､btnAという変数には値が入ります｡
次に、btnBを押したときには､btnAはUndefinedになります｡

$('#btnA')
  .click ->
    btnA = "ボタンAの変数だよ"
    console.log("Aを押したよ")
    
$('#btnB')
  .click ->
    console.log("Bで押したよ" + btnA)

■(B)変数が使い回せるパターン
btnAを押すと､btnAという変数には値が入ります｡
次に、btnBを押したときには､btnAは先程の値が入っています｡

$('#btnA')
  .click ->
    btnA = "ボタンAの変数だよ"
    console.log("Aを押したよ")
        
    d = new $.Deferred()
        
    d.promise().then ->
      console.log("btnAの変数：" + btnA)
        
    $('#btnB').data('test', d)
        
    
$('#btnB')
  .click ->
    d = $('#btnB').data('test')
    d.resolve()

■補足
いいタイトルが思い浮かばず､抽象的ですみません｡

一応､下記もみて動作ケース(A)では動かないはわかりました｡
https://teratail.com/questions/97163

行動規範の内容に同意します

回答2件

ベストアンサー

1つ目の質問についてのみ回答します。
2つ目の質問については、書かれていることがよくわからないので答えられません。実例を提示するか、わかりやすく書いてください。

coffeescript
1$('#btnA')
2  .click ->
3    # btnA のスコープはここから。
4    btnA = "ボタンAの変数だよ"
5    console.log("Aを押したよ")
6    # btnA のスコープはここまで。
7
8$('#btnB')
9  .click ->
10    console.log("Bで押したよ" + btnA)  # btnA のスコープの外なので、btnA は使えない。

coffeescript
1$('#btnA')
2  .click ->
3    # btnA のスコープはここから。
4    btnA = "ボタンAの変数だよ"
5    console.log("Aを押したよ")
6
7    d = new $.Deferred()
8
9    d.promise().then ->
10      console.log("btnAの変数：" + btnA)  # btnA のスコープの中なので、btnA は使える。
11
12    $('#btnB').data('test', d)
13    # btnA のスコープはここまで。
14
15$('#btnB')
16  .click ->
17    d = $('#btnB').data('test')
18    d.resolve()

詳しくは「クロージャ」等で検索すればいいと思います。

ちなみに、本題からそれますが、わざわざ Deferred を使う必要はないと思います。

coffeescript
1$('#btnA')
2  .click ->
3    btnA = "ボタンAの変数だよ"
4    console.log("Aを押したよ")
5
6    d = ->
7      console.log("btnAの変数：" + btnA)
8
9    $('#btnB').data('test', d)
10
11$('#btnB')
12  .click ->
13    d = $('#btnB').data('test')
14    d()