Javascript 防止函數的一部分運行直到其他部分完成

Question

我有一個用於重新加載 iframe 的函數，我希望它在重新加載 iframe 后而不是同時做更多的事情。

var heightArray = [];

function changeScroll() {
    console.log(Number(heightArray[0]));
    $('#vidList').contents().scrollTop(Number(heightArray[0]));
}

function changeVideo(source, title, desc) {
    heightArray = [];
    $("#current-video_html5_api").attr('src', source);
    $(".vidTitle").html(title);
    $(".vidDesc").html(desc);
    document.getElementById('vidList').contentWindow.location.reload();
        //Stuff I want to happen after ^ this happens
    var vidListHeight = $('#vidList').contents().scrollTop();
    heightArray.push(vidListHeight);
    console.log(heightArray);
    changeScroll();
}

我將如何去做，以便在document.getElementById('vidList').contentWindow.location.reload();之后出現changeVideo()中的所有document.getElementById('vidList').contentWindow.location.reload(); 實際上發生在它之后。 換句話說，我如何讓函數在運行下一個之前單獨完成每件事（即首先清除 heightArray，然后更改curreent-video_html5_api的源等）

Answer 1

您的所有代碼都同步運行，而不是重新加載框架。

因此，在重新加載該幀后需要異步調用后，您需要調用需要運行的代碼。

Frame 有您可以訂閱的onload事件：

document.getElementById('vidList').load = function() {
var vidListHeight = $('#vidList').contents().scrollTop();
    heightArray.push(vidListHeight);
    console.log(heightArray);
    changeScroll();
};