全局变量不更新 [JavaScript]

Question

我正在开发一个网络应用程序，该应用程序绘制美国地图并根据财务数据和滑块选择的年份范围为其着色。从技术上讲，绘制了三张地图，并且有三个按钮可以切换显示三张地图中的哪一张。单击按钮还应更改全局变量的值，以便更新地图颜色的函数知道要更改哪个地图。然而，变量似乎并没有改变。它在更改地图的函数内部发生变化，但不会在其他任何地方发生变化。这是代码的精简版本，它设置按钮和函数来更改 activeMap 的值。我已经包含了一个每秒打印出活动地图值的函数。它总是打印出空值。

<template>
    <div>
        <v-row class="pa-5">
            <v-col cols="12">
                <v-card outlined class="menu">
                    <div class="pa-3" style="text-align: center">
                        <v-btn
                            block
                            fab
                            large
                            outlined
                            tile
                            x-small
                            @click="toggleMap('incomes')"
                        >
                            <span class="buttonText">Incomes</span></v-btn
                        >

                        <v-btn
                            block
                            fab
                            large
                            outlined
                            tile
                            x-small
                            @click="toggleMap('home_values')"
                            ><span class="buttonText">House Prices</span></v-btn
                        >

                        <v-btn
                            block
                            fab
                            large
                            outlined
                            tile
                            x-small
                            @click="toggleMap('combined')"
                            ><span class="buttonText"> Market Health </span></v-btn
                        >
                    </div>
                </v-card>
            </v-col>
            <v-col style="text-align: center" id="d3-map" cols="0">
                <v-container class="container" id="map-container">
                    <v-col id="incomes" class="map"></v-col>
                    <v-col id="home_values" class="map"></v-col>
                    <v-col id="combined" class="map"></v-col>
                </v-container>
            </v-col>
        </v-row>
    </div>
</template>
<script>
import {
    defineComponent,
    onMounted,
} from "@nuxtjs/composition-api";

export default defineComponent({
    name: "Map",
    components: {},
    setup() {
        // Array contains html ID names corresponding to each div containing a map (SVG)
        const MAP_DIVS = document.getElementsByClassName("map");

        // Init vars to keep track of the actively displayed div (SVG) and corresponding map data
        var activeMap = null;

        onMounted(() => {
            checkMap();
        });

        // Define function to print activeMap every second
        function checkMap() {
            console.log(activeMap);
            setTimeout(checkMap, 1000);
        }

        // Define function to create toggle map btns
        function createToggleBtn(parentDiv, divControlled, btnText, toggleFunc) {
            var btn = document.createElement("button");
            btn.classList.add("toggle_btn");
            btn.innerText = btnText;
            btn.value = divControlled;
            btn.onclick = function () {
                toggleFunc(divControlled);
            };
            document.getElementById(parentDiv).appendChild(btn);
            return btn;
        }

        // Define toggle map functionality--used to change the 'active' map div/SVG that's displayed
        function toggleMap(divName) {
            if (divName == MAP_DIVS[0].id && activeMap != MAP_DIVS[0].id) {
                activeMap = MAP_DIVS[0].id;
            } else if (divName == MAP_DIVS[1].id && activeMap != MAP_DIVS[1].id) {
                activeMap = MAP_DIVS[1].id;
            } else if (divName == MAP_DIVS[2].id && activeMap != MAP_DIVS[2].id) {
                activeMap = MAP_DIVS[2].id;
            }
        }

        return {
            checkMap,
            toggleMap,
            createToggleBtn,
        };
    },
});
</script>

Answer 1

当你只是在函数内部设置它时，它就变成了一个局部变量。要将其设置为全局变量，您需要将其覆盖（并定义）为

window

属性：

export default defineComponent({
name: "Map",
components: {},
setup() {
    // Array contains html ID names corresponding to each div containing a map (SVG)
    const MAP_DIVS = document.getElementsByClassName("map");

    // Init vars to keep track of the actively displayed div (SVG) and corresponding map data
    window.activeMap = null;//window property, undefined if this line is left out

    onMounted(() => {
        checkMap();
    });

    // Define function to print activeMap every second
    function checkMap() {
        console.log(window.activeMap);//access is possible as activeMap too, but its safer to use the window property
        setTimeout(checkMap, 1000);
    }

    // Define function to create toggle map btns
    function createToggleBtn(parentDiv, divControlled, btnText, toggleFunc) {
        var btn = document.createElement("button");
        btn.classList.add("toggle_btn");
        btn.innerText = btnText;
        btn.value = divControlled;
        btn.onclick = function () {
            toggleFunc(divControlled);
        };
        document.getElementById(parentDiv).appendChild(btn);
        return btn;
    }

    // Define toggle map functionality--used to change the 'active' map div/SVG that's displayed
    function toggleMap(divName) {
        if (divName == MAP_DIVS[0].id && activeMap != MAP_DIVS[0].id) {
            window.activeMap = MAP_DIVS[0].id;//Here it is important to define it as a window property
        } else if (divName == MAP_DIVS[1].id && activeMap != MAP_DIVS[1].id) {
            window.activeMap = MAP_DIVS[1].id;//here too
        } else if (divName == MAP_DIVS[2].id && activeMap != MAP_DIVS[2].id) {
            window.activeMap = MAP_DIVS[2].id;//and also here
        }
    }

    return {
        checkMap,
        toggleMap,
        createToggleBtn,
    };
},
});