被調用的Javascript函數未執行

Question

我有一個名為highchartCheck的內部函數，該函數似乎沒有在執行，我也不知道為什么。 執行打印介質查詢檢查后，即使在if塊的末尾調用它，也不會記錄highchartCheck記錄。

if (window.matchMedia) {
    var mq = window.matchMedia('print');

        if (mq.matches) {
            console.log("Print JS Executed");

            function highchartCheck() {
                console.log("check func exec");

                if (document.getElementById('highcharts-0') && document.getElementById("highcharts-2") && document.getElementById("highcharts-4")) {
                    document.getElementById("highcharts-0").querySelectorAll("svg")[0].setAttribute("viewBox", "0 0 5.5in 3.6in");
                    document.getElementById("highcharts-2").querySelectorAll("svg")[0].setAttribute("viewBox", "0 0 5.5in 3.6in");
                    document.getElementById("highcharts-4").querySelectorAll("svg")[0].setAttribute("viewBox", "0 0 5.5in 3.6in");
                    console.log("if exec");
                } else {
                    setTimeout(highchartCheck, 250);
                }
            }

            //Print Styling
            $('#one').find("rect").css({"width": "3.6in !important";});
            $('#two').find("rect").css({"width": "3.6in !important";});
            $('#three').find("rect").css({"width": "3.6in !important";});

            highchartCheck();


        }

}

Answer 1

在運行函數之前，您只需要檢查DOM是否已完全加載即可。

function doStuff() {
    // Set Attributes
    document.getElementById("highcharts-0").querySelectorAll("svg")[0].setAttribute("viewBox", "0 0 5.5in 3.6in");
    document.getElementById("highcharts-2").querySelectorAll("svg")[0].setAttribute("viewBox", "0 0 5.5in 3.6in");
    document.getElementById("highcharts-4").querySelectorAll("svg")[0].setAttribute("viewBox", "0 0 5.5in 3.6in");
    //Print Styling
    $('#one').find("rect").css({"width": "3.6in !important"});
    $('#two').find("rect").css({"width": "3.6in !important"});
    $('#three').find("rect").css({"width": "3.6in !important"});
}

if (window.matchMedia) {
    var mq = window.matchMedia('print');
    if (mq.matches) {
        // Call the function until true
        if (document.readyState == "complete" || document.readyState == "loaded") {
            // document is already ready to go - do what you want
            doStuff();
        }
    }
}