Question

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

<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）），以便每次单击新轨道时都可以播放该轨道。

Answer 1

您不太了解回调函数在javascript中的工作原理，而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函数内部而不是外部声明。

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

1 个答案: