無法在jquery函數外部獲取變量的值

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函數內部而不是外部聲明。