javascript - 为什么嵌套函数中不能访问局部作用域变量？

Question

    <from>
    <input type="number" placeholder="time interval" id="time">
    <input type="submit" id="submit" value="start">
    </form>
    <br>
    <br>
    <audio src="p.mp3" controls="controls" id="audio">
     Your browser does not support the audio tag.
    </audio>

    <script type="text/javascript">
        (function(){
             var music = document.getElementById('audio');
             var submit = document.getElementById('submit');
             //1
             var mytime =  document.getElementById('time').value*60000;
             function musicStart(){
                music.play();
             };
             submit.addEventListener('click',function(){

                //2, var mytime=document.getElementById('time').value*60000;

                 if(music.paused === true){
                    setTimeout(musicStart, mytime);
                    //music.play();
                 }else{
                    //time.value ="";
                    music.pause();
                 }
              })
        }());
    </script>

如上所述的脚本，当我将代码 var mytime = document.getElementById('time').value*60000; 放在第 1 个位置时，它无法运行，但在第 2 个位置运行？

mytime 变量(在 function(){} 中定义)应该在嵌套函数(在嵌套函数中定义)中访问。

为什么当我将 mytime 变量放在 1 位置时它不起作用？有帮助吗？

Answer 1

当您加载页面时，它会运行脚本，此时“time”输入为空，因此 mytime 的值将为空。

当您将其放置在单击事件中时，当您运行单击时，它只会获取值，这将为您提供结果。