jQuery事件回調和全局變量

Question

我面臨一個奇怪的行為，這違背了我對JS中的閉包和范圍的理解。

這是我的代碼示例：

  var cta_container   = $("#call_to_action_container");
  var cta_div         = "<div>SOME VARYING HTML</div>";
  var ruler           = $('<div id="height_ruler"/>');
  var ctac_height;


  ruler.append(cta_div);
  cta_container.append(ruler);
  ctac_height = ruler.outerHeight();


  // If we already reached phase 3, we don't attach handlers again
  if (!this.reached_phase_3) {
    cta_upper.click(function(event) {
      console.log("Height during click callback : "+ ctac_height);
    });
  }
  this.reached_phase_3 = true;


  console.log("Height before click : "+ ctac_height);
  cta_upper.click();// Manually triggering the click
  console.log("Height after click : "+ ctac_height);

這是骨干網視圖方法的一部分。 基本上，我有一個div我可以單擊它來切換。 這個div會隨着時間改變大小。 我從click事件回調outerHeight其outerHeight作為全局變量進行訪問。 但是，盡管Backbone的View方法中的值已正確更新，但回調范圍內的值並未更新。

例如，第一次單擊時，此代碼可能輸出：

Height before click :            100
Height during click callback :   100
Height after click :             100

然后，在div高度更改后，我再次單擊並獲得例如：

Height before click :            147
Height during click callback :   100
Height after click :             147

ctat_height變量的值在設置回調的方法調用中更新，但不在回調范圍內更新。

根據我對閉包的了解，它們不會在其作用域內復制全局變量值，而是通過作用域鏈進行訪問。 那么，為什么ctat_height無法正確更新？

我很確定我可以輕松找到解決此問題的方法，但這並不能幫助我理解為什么它不起作用。

如果有人可以向我解釋為什么會這樣，或者指出合適的資源，我將非常感激！

Answer 1

基於@ Kevin-b的答案，我找到了一個非常快速的解決方案，該解決方案是在View的范圍內設置ctac_height變量（ this.ctac_height而不是var ctac_height ）。