Javascript 匿名函数和全局变量

Question

我想我会尝试聪明地创建一个自己的等待函数（我意识到还有其他方法可以做到这一点）。所以我写道：

var interval_id;
var countdowntimer = 0;

function Wait(wait_interval) {
  countdowntimer = wait_interval;

  interval_id = setInterval(function() {
    --countdowntimer <=0 ? clearInterval(interval_id) : null;
  }, 1000);

  do {} while (countdowntimer >= 0);
}

// Wait a bit: 5 secs
Wait(5);

除了无限循环之外，这一切都有效。经检查，如果我取出 While 循环，则匿名函数将按预期输入 5 次。显然，全局变量 countdowntimer 是递减的。

但是，如果我在 While 循环中检查 countdowntimer 的值，它永远不会下降。尽管事实上匿名函数是在 While 循环中被调用的！

显然，不知何故，有两个 countdowntimer 值浮动，但为什么呢？

编辑

好的，所以我（现在）明白Javascript是单线程的。这在某种程度上回答了我的问题。但是，在这个单线程的处理过程中，所谓的使用setInterval的异步调用实际上是在哪一点发生的呢？只是在函数调用之间吗？当然不是，那么那些需要很长时间执行的函数呢？

Answer 1

周围没有该变量的两个副本。 Web 浏览器中的 JavaScript 是单线程（除非您使用新的 Web Worker 工具）。因此匿名函数永远没有机会运行，因为 Wait 占用了解释器。

您不能在基于浏览器的 Javascript 中使用忙等待函数；不会发生任何其他事情（并且在大多数其他环境中它们是一个坏主意，即使它们是可能的）。您必须改用回调。这是对其的简约改造：

var interval_id;
var countdowntimer = 0;

function Wait(wait_interval, callback) {
    countdowntimer = wait_interval;

    interval_id = setInterval(function() {
        if (--countdowntimer <=0) {
            clearInterval(interval_id);
            interval_id = 0;
            callback();
        }
    }, 1000);
}

// Wait a bit: 5 secs
Wait(5, function() {
    alert("Done waiting");
});

// Any code here happens immediately, it doesn't wait for the callback

编辑回答您的后续问题：

但是，在这个单线程的处理过程中，所谓的使用 setInterval 的异步调用实际上是在哪一点发生的呢？只是在函数调用之间吗？当然不是，那些需要很长时间执行的函数怎么办？

几乎是的，所以函数不要长时间运行很重要。 （从技术上讲，它甚至不在函数调用之间，因为如果您有一个函数调用其他三个函数，则解释器在该（外部）函数运行时无法执行任何其他操作。）解释器本质上维护了一个它需要的函数队列执行。它首先执行任何全局代码（而不是像一个大函数调用）。然后，当事情发生时（用户输入事件、达到通过 setTimeout 安排的调用回调的时间等），解释器会将其需要进行的调用推送到队列中。它总是处理队列前面的调用，因此事情可以堆积起来（就像您的 setInterval 调用，尽管 setInterval 是一个位特殊 - 如果前一个回调仍在队列中等待处理，则它不会对后续回调进行排队）。因此，请考虑代码何时获得控制权以及何时释放控制权（例如，通过返回）。解释器只能在您释放控制权之后并将控制权再次交还给您之前执行其他操作。同样，在某些浏览器（例如 IE）上，同一线程还用于绘制 UI 等，因此 DOM 插入（例如）不会显示，直到您将控制权释放回浏览器以便它可以获取继续画它。

当 Web 浏览器中使用 Javascript 时，您确实需要采用事件驱动的方法来设计和编码解决方案。典型的例子是提示用户输入信息。在非事件驱动的世界中，您可以这样做：

// Non-functional non-event-driven pseudo-example
askTheQuestion();
answer = readTheAnswer();      // Script pauses here
doSomethingWithAnswer(answer); // This doesn't happen until we have an answer
doSomethingElse();

这在事件驱动的世界中不起作用。相反，您可以这样做：

askTheQuestion();
setCallbackForQuestionAnsweredEvent(doSomethingWithAnswer);
// If we had code here, it would happen *immediately*,
// it wouldn't wait for the answer

例如，askTheQuestion 可能会在页面上覆盖一个 div，其中包含提示用户输入各种信息的字段，并在完成后单击“确定”按钮。 setCallbackForQuestionAnswered 实际上会挂钩“OK”按钮上的 click 事件。 doSomethingWithAnswer 将从字段中收集信息，删除或隐藏 div，并对信息执行某些操作。

Answer 2

大多数 Javascript 实现都是单线程，因此当它执行 while 循环时，它不会让其他任何东西执行，因此 interval 永远不会在 while 运行时运行，从而形成无限循环。

有许多类似的尝试在 JavaScript 中创建睡眠/等待/暂停函数，但由于大多数实现都是单线程的，因此它根本不允许您在睡眠时执行任何其他操作（！）。

进行延迟的另一种方法是编写超时。它们可以推迟一段代码的执行，但您必须在许多函数中中断它。您始终可以内联函数，以便更容易理解（并在同一执行上下文中共享变量）。

还有一些库向 JavaScript 添加了一些语法糖，使其更具可读性。

编辑：
John Resig<​​/strong> 本人发表了一篇关于 如何使用 javascript 的优秀博客文章定时器工作。他非常详细地解释了这一点。希望有帮助。

Answer 3

实际上，它几乎可以保证间隔函数永远不会在循环执行时运行，因为 JavaScript 是单线程的。

之前没有人进行Wait（而且很多人都尝试过），这是有原因的；这是根本不可能做到的。

您将不得不将您的函数分解为多个位，并使用 setTimeout 或 setInterval 来安排它们。

//first part
...
setTimeout(function(){
    //next part
}, 5000/*ms*/);

根据您的需要，这可以（应该）作为状态机实现。

Answer 4

为什么不直接更改 setInterval 上的毫秒属性，而不是使用全局倒计时变量呢？像这样的东西：

var waitId;

function Wait(waitSeconds)
{
    waitId= setInterval(function(){clearInterval(waitId);}, waitSeconds * 1000);
}