跳过第一个获取-jQuery

Question

在单击playButton时，我执行2个“ get”命令以在#playAreaImageand中显示图像，并在#playAreaSongs中显示音频元素和播放列表。 通常这可以正确显示，但有时程序会跳过第一个get，然后执行第二个，然后执行第一个。 这种行为的原因是什么？

这是我的代码：

$('body').on('click', '.playButton', function () {
    var playlistID = this.id;
    var playlistImage;
    var playlistUrl = 'http://localhost/playlist/api/playlist.php?type=playlist&id=';
    playlistUrl += playlistID;
    $('#playAreaImage').text('');
    $.getJSON(playlistUrl, function (result) {
        console.log('first');
        var playlistData = result.data;
        playlistImage = playlistData.image;
        playlistImage = `<img id="playlistImg" src="${playlistImage}">`;
    });
    $('#playAreaSongs').text('');
    url = "http://localhost/playlist/api/playlist.php?type=songs&id=";
    url += playlistID;
    let list = '<audio src=" " id="audioPlayer" controls onplay="playPlaylist();" onpause="pausePlaylist();">Sorry, your browser does not support audio!</audio>';
    list += "<ul id='playlist'>";
    $.getJSON(url, function (result) {
        $.each(result, function (i, rowElement) {
            if (i === "data") {
                var songs = this.songs;
                $.each(songs, function (songI, song) {
                    if (songI === 0) {
                        list += `<li class='current-song'><a href="${this.url}" name="${this.name}">${this.name}</a></li>`;
                    } else {
                        list += `<li><a href="${this.url}" name="${this.name}">${this.name}</a></li>`;
                    }
                });
                list += `</ul>`;
                $('#playAreaSongs').append(list);
                $("#playAreaImage").append(playlistImage);
                $('#playArea').show().css('display', 'flex').attr('name', playlistID);
            }
        });
    });
});