javascript - 在 x 时间后一个接一个地运行 JavaScript 函数

Question

我正在尝试使用 SVG 和 JavaScript 开发一个简单的动画。我有一个“按钮”，它正在运行一个 onclick 函数来隐藏“开始”按钮并启动动画。

我在时基功能方面遇到问题，基本上我有“气泡框”，其中会出现一些文本，就好像动画正在与用户对话一样，有点像对话，过一会儿该文本就会消失一个新的出现在它的位置。

问题是按下“开始”按钮后，文本显示半秒钟，然后消失。 它应该在按下开始按钮后出现，然后，例如 5 秒后，它再次消失。

这是我到目前为止所做的，一切都在 SVG 标签内。

 <rect id="startButton" style="cursor:pointer;" x="200" y="150" rx="5" height="25" width="80" fill="white" stroke="white" stroke-width="1" onclick="startAni()"/>
    <text id="startText" style="cursor:pointer;" x="215" y="170" fill="black" onclick="startAni()">START</text>

    <script>
        function startAni(){

            document.getElementById("textLine1").style.display="inline-block";
            document.getElementById("startButton").style.display="none";
            document.getElementById("startText").style.display="none";

            window.setTimeout(function(){textBubble(); 50000})

            function textBubble(){
                document.getElementById("textLine1").style.display="none";

            }

        }
    </script>

这就是“气泡框”

<text id="textLine1" x="300" y="175" fill="white">WHY?</text>

至于 CSS，这是我为 textLine1 得到的

#textLine1{
display:none;

我对如何实现这一目标的新想法很满意，但我更愿意使用 JavaScript、SVG 或 CSS。 JQuery 不是不可能的，但由于我不熟悉它，所以我暂时不想使用它。

提前谢谢你。

Answer 1

你的计时器在错误的地方，更具体地说，你的花括号关闭了这个功能。也不需要考虑它的功能，只需传入 textBubble。

window.setTimeout(textBubble, 50000);