调用Javascript函数不执行

Question

我有一个名为highchartCheck的内部函数，它似乎没有执行，我也不知道为什么。执行打印媒体查询检查，并将其记录下来，而不是highchartCheck，即使我在if块的末尾调用它。

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();
        }
    }
}