Question

下面是一个很少修改的代码，并从javascript好的部分解除。

我可以看到匿名创建后调用此函数两次。

＆＃13;

var fade = function(node, name) {
  var level = 1;
  var step = function() {
    var hex = level.toString(16);
    node.style.backgroundColor = '#FFFF' + hex + hex;
    if (level < 15) {
      level += 1;
      //setTimeout(step, 100);
      console.log("in" + name + level)
    }
  };
  setTimeout(step, 100);
  console.log("out" + name + level)
};

＆＃13;

＆＃13; 当我用相同的第二个参数调用它们时，名字=＆＃34;一个＆＃34;第二次调用发生但两个调用中的level值也相同，如在控制台日志输出中所示＆＃34;在＆＃34;只打印一次

如下

＆＃13;

outone1 (index):34
outone1 (index):34
2inone2

＆＃13;

    fade(document.body, "one");
fade(document.body, "one");

＆＃13;

另一方面，如果我使用不同的参数调用下面的函数两次，如下所示，第二次调用发生时间较早，但两次调用中的level值不同，如在控制台日志输出中所示＆＃34;在＆＃34中;打印两次

如下

＆＃13;

outone1 (index):34
outtwo1 (index):34
inone2 (index):30
intwo2

＆＃13;

    fade(document.body, "one");

 fade(document.body, "two");

＆＃13;

问题是为什么当name参数的值相同时，两个调用显然共享了level的值？而名称不同的情况并非如此。理想情况下，控制台输出应该类似于两个＆＃34; in＆＃34;在这两种情况下都打印出为什么它在第一种情况下只打印一次而在第二种情况下打印两次？

Answer 1

我认为对控制台输出有误解。例如：

outone1 (index):34
outone1 (index):34
2inone2

2inone2实际上意味着：

inone2
inone2

Chrome控制台倾向于使用消息前面的数字折叠重复输出，以指示它发生了多少次。

此外，这里没有发生可变状态的共享。你所看到的似乎表明控制台上的变量共享实际上只是JavaScript异步性质的结果。

例如：

outone1 (index):34
outtwo1 (index):34
inone2 (index):30
intwo2

当您致电fade(document.body, 'one')然后fade(document.body, 'two')时，每次呼叫setTimeout以启动超时循环。 setTimeout是一个异步调用，意味着原始函数将立即返回（因此outone1然后outtwo1）然后将来某个时间（本例中为100ms）将调用预定的内部step函数。这就是为什么在控制台inone2和intwo2上来回交换位置的原因。没有阻塞，两个函数在几毫秒之内被调用。事实上，控制台输出证明没有状态共享，否则你可能会期望：

inone2
intwo3

这会澄清你的问题吗？

多个调用中的javascript变量范围

1 个答案: