Javascript 无法获取jquery函数外部变量的值

我正在尝试制作一个具有音频可视化的音乐播放器。我希望它的功能就像当我点击曲目名称时，该曲目应该开始播放

<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>

var sel2='audio/audio3.mp3'，
sel1=''；
$（“li”）。单击（函数（）{
sel1=（$（this.data（'val'））；
sel2='audio/'+sel1；
console.log（sel2）；
});
let wave=new circulaudiowave（document.getElementById（'chart-container'）；
wave.loadAudio（sel2）；

我希望sel2值被发送到jQuery函数之外，以便“wave.loadAudio（sel2）；”可以使用它。在运行这个脚本时，我只得到“audio/audio3.mp3”播放，因为我之前已经将这个值赋给了变量。

---

我希望它设置sel2的新值（以我单击的值为准，然后将其传递给wave.loadAudio（sel2）），这样每次单击新曲目时，我都会播放该曲目。

您不太了解javascript中回调函数是如何工作的，javascript是异步的。您的

wave.loadAudio（sel2）

将始终获得

audio/audio3.mp3

，因为它是在单击功能之前加载的。请看一个简单的例子：

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

如果运行此脚本，您将看到：“First”、“Third”、“Second”，因为回调函数被添加到

回调队列

，并且当

调用堆栈

为空时，该函数被实现，这样回调函数就可以用作非阻塞函数。因此，在您的示例中，您应该向body click函数添加

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函数内部声明，而不是在外部声明。

您不太了解javascript中回调函数是如何工作的，这是javascript的异步方面。您的

wave.loadAudio（sel2）

将始终获得

audio/audio3.mp3

，因为它是在单击功能之前加载的。请看一个简单的例子：

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

如果运行此脚本，您将看到：“First”、“Third”、“Second”，因为回调函数被添加到

回调队列

，并且当

调用堆栈

为空时，该函数被实现，这样回调函数就可以用作非阻塞函数。因此，在您的示例中，您应该向body click函数添加

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应该在函数内部声明，而不是在函数外部声明。

然后将

wave.loadAudio（sel2）

放在函数中？问题不是您无法在回调函数外部获取

sel2

的值，问题是当你想要得到它的时候。您在重新分配它之前（在单击元素之前）访问它。然后将

wave.loadAudio（sel2）

放入您的函数中？问题不在于您无法在回调函数之外获取

sel2

的值，问题在于您试图获取它时。您在重新分配之前（在单击元素之前）访问它。