A confusion about clearTimeout

Customization
1

The Javascript code is as follows:

    let InnerHouse = document.getElementById("innerHouse");
    let OuterHouse = document.getElementById("outerHouse");
    let stopRoaming = document.getElementById("stopRoaming");

    let it1 = window.setTimeout(() => {
        viewer.switchToView("facade")
    }, 0);
    let it2 = window.setTimeout(() => {
        viewer.switchToView("hall1", 10)
    }, 3250);
    let it3 = window.setTimeout(() => {//从这个视点往下时间间隔均为1625ms
        viewer.switchToView("hall2", 10)
    }, 6500);
    let it4 = window.setTimeout(() => {
        viewer.switchToView("hall3", 10)
    }, 8125);
    let it5 = window.setTimeout(() => {
        viewer.switchToView("hall4", 10)
    }, 9750);
    let it6 = window.setTimeout(() => {
        viewer.switchToView("hall5", 10)
    }, 11375);
    let it7 = window.setTimeout(() => {
        viewer.switchToView("1F-EV", 10);
    }, 14625);
    let Timer1 = [it1, it2, it3, it4, it5, it6, it7];

    let ot1 = window.setTimeout(() => {
        viewer.switchToView("正面")
    }, 0);
    let ot2 = window.setTimeout(() => {
        viewer.switchToView("見上げる")
    }, 3000);
    let ot3 = window.setTimeout(() => {
        viewer.switchToView("東正面")
    }, 8000);
    let ot4 = window.setTimeout(() => {
        viewer.switchToView("北正面")
    }, 14000);
    let ot5 = window.setTimeout(() => {
        viewer.switchToView("正面")
    }, 19000);
    let ot6 = window.setTimeout(() => {
        viewer.switchToView("中層階外観")
    }, 24000);
    let ot7 = window.setTimeout(() => {
        viewer.switchToView("屋上")
    }, 29000);
    let ot8 = window.setTimeout(() => {
        viewer.switchToView("大阪城")
    }, 34000);
    let Timer2 = [ot1, ot2, ot3, ot4, ot5, ot6, ot7, ot8];

    for (let i = 0; i < Timer1.length; i++) {
        window.clearInterval(Timer1[i]);
    }
    for (let i = 0; i < Timer2.length; i++) {
        window.clearInterval(Timer2[i]);
    }

    function innerHouse() {
        window.setTimeout(() => {
            viewer.switchToView("facade")
        }, 0);
        window.setTimeout(() => {
            viewer.switchToView("hall1", 10)
        }, 3250);
        window.setTimeout(() => {//从这个视点往下时间间隔均为1625ms
            viewer.switchToView("hall2", 10)
        }, 6500);
        window.setTimeout(() => {
            viewer.switchToView("hall3", 10)
        }, 8125);
        window.setTimeout(() => {
            viewer.switchToView("hall4", 10)
        }, 9750);
        window.setTimeout(() => {
            viewer.switchToView("hall5", 10)
        }, 11375);
        window.setTimeout(() => {
            viewer.switchToView("1F-EV", 10);
        }, 14625);
    }

    function outerHouse() {
        window.setTimeout(() => {
            viewer.switchToView("正面")
        }, 0);
        window.setTimeout(() => {
            viewer.switchToView("見上げる")
        }, 3000);
        window.setTimeout(() => {
            viewer.switchToView("東正面")
        }, 8000);
        window.setTimeout(() => {
            viewer.switchToView("北正面")
        }, 14000);
        window.setTimeout(() => {
            viewer.switchToView("正面")
        }, 19000);
        window.setTimeout(() => {
            viewer.switchToView("中層階外観")
        }, 24000);
        window.setTimeout(() => {
            viewer.switchToView("屋上")
        }, 29000);
        window.setTimeout(() => {
            viewer.switchToView("大阪城")
        }, 34000);
    }

    InnerHouse.addEventListener("click", () => {
        innerHouse();
    });

    OuterHouse.addEventListener("click", () => {
        outerHouse();
    });

    stopRoaming.addEventListener("click", () => {
        //clear intervals
        /*  code version 1
        let it = 0;
        let ot = 0;
        for (let i = 1; i <= Timer1.length; i++) {
            it = window[it + i];
            window.clearInterval(it);
        }
        for (let i = 1; i <= Timer2.length; i++) {
            ot = window[ot + i];
            window.clearInterval(ot);
        }*/
            //code version2
            window.clearTimeout(it1);
            window.clearTimeout(it2);
            window.clearTimeout(it3);
            window.clearTimeout(it4);
            window.clearTimeout(it5);
            window.clearTimeout(it6);
            window.clearTimeout(it7);
            window.clearTimeout(ot1);
            window.clearTimeout(ot2);
            window.clearTimeout(ot3);
            window.clearTimeout(ot4);
            window.clearTimeout(ot5);
            window.clearTimeout(ot6);
            window.clearTimeout(ot7);
    });

try/finally shows that clearTimeout has been executed, setTimeout should not be executed anymore. But for now, No matter what method I use. setTimeout still executing and views are switching.
So I am confused. Normally, when I click the “innerHouse” or “outerHouse” element, and then click “stopRoaming” element,the interval and camera movement will be stop.
Firefox and Chrome didn’t show any error in the console. So I don’t know what’s wrong with my code.

2

Hi. To stop setTimeout(), clearTimeout() must be called with id returned by related setTimeout() call. In outerHouse() and innerHouse() functions, values returned by setTimeout() calls are not stored and clearTimeout() stops setTimeout() called before innerHouse() function definition, because it1 …it7, ot1…ot7 variables are asigned to these calls.

1 Like
3

Thanks for your anwser! The problem has solved!

    let InnerHouse = document.getElementById("innerHouse");
    let OuterHouse = document.getElementById("outerHouse");
    let stopRoaming = document.getElementById("stopRoaming");

    function innerHouse() {
        // WALK.TELEPORT_TO_VIEW_MAX_TIME = 0;
        it1 = window.setTimeout(() => {
            viewer.switchToView("facade")
        }, 0);
        it2 = window.setTimeout(() => {
            viewer.switchToView("hall1", 10)
        }, 3250);
        it3 = window.setTimeout(() => {
            viewer.switchToView("hall2", 10)
        }, 6500);
        it4 = window.setTimeout(() => {
            viewer.switchToView("hall3", 10)
        }, 8125);
        it5 = window.setTimeout(() => {
            viewer.switchToView("hall4", 10)
        }, 9750);
        it6 = window.setTimeout(() => {
            viewer.switchToView("hall5", 10)
        }, 11375);
        it7 = window.setTimeout(() => {
            viewer.switchToView("1F-EV", 10);
        }, 14625);
        timer1 = [it1,it2,it3,it4,it5,it6,it7];
    }

    function outerHouse() {
        ot1 = window.setTimeout(() => {
            viewer.switchToView("正面")
        }, 0);
        ot2 = window.setTimeout(() => {
            viewer.switchToView("見上げる")
        }, 3000);
        ot3 = window.setTimeout(() => {
            viewer.switchToView("東正面")
        }, 8000);
        ot4 = window.setTimeout(() => {
            viewer.switchToView("北正面")
        }, 14000);
        ot5 = window.setTimeout(() => {
            viewer.switchToView("正面")
        }, 19000);
        ot6 = window.setTimeout(() => {
            viewer.switchToView("中層階外観")
        }, 24000);
        ot7 = window.setTimeout(() => {
            viewer.switchToView("屋上")
        }, 29000);
        ot8 = window.setTimeout(() => {
            viewer.switchToView("大阪城")
        }, 34000);
        timer2 = [ot1,ot2,ot3,ot4,ot5,ot6,ot7,ot8];
    }

    InnerHouse.addEventListener("click", () => {
        let material =  viewer.findMaterial('bai1');
        material.opacity = 1;
        innerHouse();
    });

    OuterHouse.addEventListener("click", () => {
        let material =  viewer.findMaterial('bai1');
        material.opacity = 1;
        outerHouse();
    });

    stopRoaming.addEventListener("click", () => {
        for (let i = 0; i< timer1.length; i++){
            window.clearTimeout(timer1[i]);
        }
        for (let i = 0; i < timer2.length; i++){
            window.clearTimeout(timer2[i]);
        }