无法在jquery函数之外获取变量的值答案

【问题标题】：Unable to get the value of variable outside jquery function无法在jquery函数之外获取变量的值
【发布时间】：2019-07-17 08:10:33
【问题描述】：

我正在尝试制作具有音频可视化功能的音乐播放器。我希望它在我单击曲目名称时起作用，然后该曲目应该开始播放

<script src="main.js"> </script>
<script src="/circular-audio-wave.min.js"></script>
<script>

    var sel2= 'audio/audio3.mp3',
        sel1 = ''; 
    $( "li" ).click(function() {   
        sel1 =  ($(this).data('val'));     
        sel2 = 'audio/' + sel1; 

        console.log(sel2);
    });

    let wave = new CircularAudioWave(document.getElementById('chart-container'));
    wave.loadAudio(sel2);
</script>

我希望将 sel2 值发送到 jQuery 函数之外，以便“wave.loadAudio(sel2);”可以使用它。在运行这个脚本时，我只播放了“audio/audio3.mp3”，因为我之前已经将此值赋给了变量。我希望它设置 sel2 的新值（无论我单击哪个，然后将其传递给 wave.loadAudio(sel2)），这样每次单击新曲目时我都会播放该曲目。

【问题讨论】：

然后把wave.loadAudio(sel2)放到你的函数里？
问题不在于你无法在回调函数之外获取sel2 的值，问题在于你试图获取它的时候。您在重新分配之前访问它（在单击元素之前）。

标签： javascript jquery

【解决方案1】：

您并不真正了解回调函数在 javascript 中是如何工作的，这是 javascript 的异步方面。您的 wave.loadAudio(sel2) 将始终得到 audio/audio3.mp3 因为在您的点击功能之前加载。看简单的例子：

console.log('First');
setTimeout(function(){
  console.log('Second')
},0);
console.log('Third');

如果你运行这个脚本你会看到：'First'，'Third'，'Second'，因为回调函数被添加到Callback queue，并且当call stack为空时，这个函数是这样实现的回调函数可以用作非阻塞。因此，在您的示例中，您应该将 wave.loadAudio(sel2) 添加到正文单击功能：

var sel2= 'audio/audio3.mp3';
let wave = new CircularAudioWave(document.getElementById('chart-container'));
sel1 = ''; 
   $( "li" ).click(function() {
     sel1 =  ($(this).data('val'));
     sel2 = 'audio/' + sel1; 
     wave.loadAudio(sel2);
});

顺便说一句，您的代码有更多错误。尽量使用默认参数，箭头函数，不要声明全局变量（sel1），避免使用var，sel1应该声明在click函数里面而不是外面。

【讨论】：