在setTimeout中使用音频时，为什么会出现ReferenceError？

Question

I want to schedule an audio play. Why this code returns a ReferenceError for a?

function playSound()
{
  var a = new Audio("mp3/win.mp3");
  setTimeout("a.play('mp3/win.mp3');", 1000);
}
playSound();

Answer 1

Move a variable definition to the global context:

var a = new Audio("mp3/win.mp3");
function playSound()
{
  setTimeout("a.play('mp3/win.mp3');",1000);
}
playSound();

Or use function notation instead of code notation

function playSound()
{
  var a = new Audio("mp3/win.mp3");
  setTimeout(function() {
    a.play('mp3/win.mp3');
  },1000);
}
playSound();

The cause of the issue, I think, is in the eval-like nature of setTimeout code notation. Let's see what MDN says on setTimeout (1) :

Passing a string instead of a function to setTimeout() suffers from the same hazards as using eval.

And then on eval (2) :

If you use the eval function indirectly, by invoking it via a reference other than eval, as of ECMAScript 5 it works in the global scope rather than the local scope. This means, for instance, that function declarations create global functions, and that the code being evaluated doesn't have access to local variables within the scope where it's being called.

And setTimeout("a.play('mp3/win.mp3')", 1000) is like an indirect eval call.

Answer 2

When you use the string notation on setTimeout it's not being treated as if it was a function as you would imagine (since the first parameter is typically a function). Instead it's treated as if it was a script that's being run whenever the amount of milliseconds has passed.

So it's as if it were adding:

<script>a.play('mp3/win.mp3');</script>

Every 1000 milliseconds.

Since a is not global (its part of the function that does the setTimeout), then it can't see it hence the ReferenceError.

Answer 3

Don't use a string as the argument to setTimeout , it's executed in the global scope, so it can't access local variables. Use a function argument.

function playSound()
{
    var a = new Audio("mp3/win.mp3");
    setTimeout(() => a.play('mp3/win.mp3'),1000);
}
playSound();