带有 Bootstrap 的 Javascript 作用域

Question

我有以下代码:

jsFiddle

<a id="test">Click me</a>
<a id="field2" style="border: 1px solid green;">0</a>


var i = 0;
$('a#test').click(function() {
     i += 1;
     var a = i;

     $('a#test').popover({
         trigger: 'manual',
         placement: 'right',
         content: function() {
            var message = "Count is" + a;
              return message;
         }
    });
    $('a#test').popover("show");
    $('a#field2').html(a);
});

当点击 Click Me 时，只有一个值会增加，但是如果我们将消息行更改为:

var message = "Count is" + i;

两个值都递增。

为什么会这样？

Answer 1

popover 构造只发生一次，在第一次点击事件期间，因为你不能在不破坏旧的 popover 的情况下重建 popover。

所以在你的情况下:

• "Count is "+ a，您从 a 变量构造弹出回调，当前值为 a。因为您在每次点击时“重新创建”a，所以使用的引用将是创建的第一个 a 变量(在第一次点击期间)。一旦退出事件函数，此引用就会丢失，因此您将无法更新它，回调中只会使用第一个值。
• "Count is "+ i，您可以使用全局变量 i 构造弹出窗口回调，该变量随时随地可用，因此您可以对其进行修改。

显然 #field2 将显示当前值，因为您使用的是当前 a 变量，而不是第一次点击时的旧变量。

进一步了解:

1. 第一次点击:i = 1，a = 1。您正在发送 a，它可以被视为 a1(第一个 a)到回调函数)。然后你退出事件函数，所以 a 变量被销毁但“它的内存”(实际上它指向的是什么，一切都是在 javascript 中引用)，所以在内存中你仍然有类似 a0 -> 1 用于回调。
2. 第二次点击:i = 2, a = 2。您没有将 a 发送到 popover 构造函数，因为您已经创建了 popover，所以它仍然是 a0 在回调函数中使用。然后你退出事件函数，现在 a 变量指向它的值。
3. 第三次点击:与第二次点击相同，依此类推。