for / in循环会在循环后退出函数吗？

Question

function toggle() {
    overlays = document.getElementsByClassName("overlay");

    if (globalOpacityValue == 0.9){
        globalOpacityValue = 0;
    }else{
        globalOpacityValue = 0.9;
    }
    console.log("globalOpacityValue: " + globalOpacityValue);

    for (overlay in overlays) {
        overlays[overlay].style.opacity = globalOpacityValue;
    }
    console.log("toggle routine done!");

    tempStoreOnChangeArtificial();
    console.log("tempStoreOnChangeArtificial done!");
}

在我看来，在for / in循环之后，我的函数结束了。

我的toggle（）从不显示“切换例程已完成！”，显然它不会运行tempStoreOnChangeArtificial（）;

但是它在for / in循环中做了一些事情。

为什么？

Answer 1

document.getElementsByClassName返回一个像object这样的数组，它不能用for ... in statement进行迭代。

＆＃13;

＆＃13;

function toggle() {
    var overlays = document.getElementsByClassName("overlay"),
        i;

    if (globalOpacityValue == 0.9){
        globalOpacityValue = 0;
    }else{
        globalOpacityValue = 0.9;
    }
    console.log("globalOpacityValue: " + globalOpacityValue);

    for (i = 0; i< overlays.length; i++) {
        overlays[i].style.opacity = globalOpacityValue;
    }
    console.log("toggle routine done!");

//    tempStoreOnChangeArtificial();
    console.log("tempStoreOnChangeArtificial done!");
}

var globalOpacityValue = 0;
toggle();

＆＃13;

<div class="overlay">a</div>
<div class="overlay">b</div>
<div class="overlay">c</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

• 您正尝试使用HTMLCollection从in获取元素。
• 使用overlay of overlays。

function toggle() {
    overlays = document.getElementsByClassName("overlay");

    if (globalOpacityValue == 0.9){
        globalOpacityValue = 0;
    }else{
        globalOpacityValue = 0.9;
    }
    console.log("globalOpacityValue: " + globalOpacityValue);

    for (overlay of overlays) {
        overlay.style.opacity = globalOpacityValue;
    }
    console.log("toggle routine done!");

    tempStoreOnChangeArtificial();
    console.log("tempStoreOnChangeArtificial done!");
}

资源

• in operator
• for...of

Answer 3

我不知道您可以使用document.getElementByClassName迭代for in也许就是问题所在，您可能想要迭代HTMLCollection，如下所示：

function toggle() {
    overlays = document.getElementsByClassName("overlay");

    if (globalOpacityValue == 0.9){
        globalOpacityValue = 0;
    }else{
        globalOpacityValue = 0.9;
    }
    console.log("globalOpacityValue: " + globalOpacityValue);

    Array.prototype.forEach.call(overlays, function(overlay) {
        overlay.style.opacity = globalOpacityValue;
    });

    console.log("toggle routine done!");

    tempStoreOnChangeArtificial();
    console.log("tempStoreOnChangeArtificial done!");
}