带有 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

弹出窗口构造仅在第一次单击事件期间发生一次，因为您无法在不破坏旧弹出窗口的情况下重建弹出窗口。

所以在你的情况下:

• “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 发送到弹出窗口构造函数，因为您已经创建了弹出窗口，因此它仍然是 a0 用于回调函数。然后退出事件函数，现在 a 变量指向它的值。
3. 第三次点击:与第二次相同，依此类推。