javascript - setTimeout 返回 Uncaught TypeError : Illegal invocation in AudioContext in Chrome 错误

Question

在 Chrome 中，我首先使用 AudioContext 创建连续音调:

var audioCtx = new (window.AudioContext || window.webkitAudioContext);

var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();

oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);

oscillator.start();

现在我想在几毫秒后停止它。所以我这样做:

setTimeout(oscillator.stop, 500)

这将返回错误 Uncaught TypeError: Illegal invocation。

但是如果我这样做了；

setTimeout(function(){oscillator.stop()}, 500)

它工作正常。

我现在想知道为什么第一个不起作用并返回错误。这似乎是执行此操作的直接方法。

Answer 1

您的原始代码不起作用，因为 stop 函数在没有任何上下文的情况下传递给 setTimeout - 它不知道应该作用于哪个对象。如果您这样调用它:

oscillator.stop();

然后在 stop 中，特殊变量 this 被设置为 oscillator 指向的对象。但是如果你这样引用它:

var x = oscillator.stop;

函数实际上并没有被调用。相反，对该函数的引用只是从 oscillator 中提取并存储在别处。该函数不记得它来自哪里，并且可以同时存储在许多不同的变量或对象属性中。例如:

var x = {};
x.foo = oscillator.stop;
x.foo();

最后一行使用 x 的上下文调用 stop (this 设置为 x)而不是振荡器。 (函数体会导致错误，因为 stop 假设其上下文看起来像什么，但调用本身是合法的。)或者，如果您这样做:

var foo = oscillator.stop;
foo();

然后 stop 将仅使用默认上下文调用。在严格模式下，this会被设置为undefined，在非严格模式下，this会被设置为window.

当你这样做时:

setTimeout(function(){oscillator.stop()}, 500)

匿名函数使用适当的上下文调用stop。如果按照@elclanrs 在评论中的建议，您这样做:

setTimeout(oscillator.stop.bind(oscillator), 500)

这实际上是同一件事:创建了一个匿名函数，它使用 oscillator 的上下文调用 stop。