Question

考虑这个闭包：

var getFunction = function(a, b, c) {
    return function () {
        console.log("A");

        foo(a, b, c); // takes a couple of seconds

        console.log("B");
    }
}

当我像这样使用它时

var bar = getFunction(a, b, c);
bar();

它将输出＆＃34; A＆＃34;和＆＃34; B＆＃34;在foo中完成计算后立即 - 而不是输出＆＃34; A＆＃34;，等待foo完成，然后输出＆＃34; B＆＃34;。

为什么？

Answer 1

问题是无论是登录控制台还是样式元素都无法阻止JS执行。也就是说，首先该函数将完全运行，然后控制台将显示排队的项目或元素的样式将被更新。

document.body.style.background = 'red';
var d = new Date();
while(new Date() - d < 1e3); // Wait 1 second
document.body.style.background = 'green';

例如，在上面的代码段中，您看不到红色背景，因为代码执行如下操作：

添加到队列：尽快使背景变为红色
做无用的操作
添加到队列：尽快使背景为绿色
现在没有代码在运行，因此可以完成排队操作
- 将背景设为红色
- 在上述之后，立即将背景设为绿色

相反，您可能需要类似

的内容

尽快让背景变红
背景为红色后，执行一些操作
完成后，尽快将背景设为绿色

为了实现这一目标，您必须将代码拆分为不同的部分并将其延迟。

document.body.style.background = 'red';
setTimeout(function() {
  var d = new Date();
  while(new Date() - d < 1e3); // Wait 1 second
  setTimeout(function() {
    document.body.style.background = 'green';
  }, 100);
}, 100);

然后，浏览器将能够利用该延迟在控制台中记录内容或更新元素的样式。

为什么这个闭包中的代码是整体执行的？

1 个答案: