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 ）。