Question

我想用间隔运行函数renews（）但是想在html打开时第一次运行。所以我写了续订（）;但它不起作用。我可以运行代码的其他功能。但只有这一个没有。谢谢你的帮助！

<html>
    <head>

    <script>

        var i=0;
        var u=0; //0:redy for the next FX
        var newstext;

        function renews() {

            if(i%2==0){
                newstext = "aaa";
            } else {
                newstext = "bbb";
            }
                document.getElementById("news").innerHTML = newstext;
                i++;
        }
        //renews(); // this doesn't work
        setInterval(function(){
        renews();
        },3000);
    </script>
    </head>

    <body>
        <span id ="news">test</span>
    </body>

</html>

Answer 1

将脚本移动到正文的底部。当您执行脚本时，尚未构建DOM，因此没有可操作的元素。

Answer 2

当您处理DOM时，仅在页面完全加载后执行代码非常重要。如果你不这样做，DOM很可能不会由代码执行时创建。

现在让我们考虑代码运行时发生的事情。你把你的js代码放在页面的标题标签中，所以它在浏览器甚至看到页面的其余部分之前就开始执行了。这是一个很大的问题，因为那个id为“news”的span元素还不存在。

那究竟发生了什么？对getElementById的调用返回 null 而不是你想要的元素，导致错误，浏览器是一个很好的运动，只是不断移动并呈现页面，但没有改变在第一次使用DOM。

你如何解决这个问题？好吧，你可以把你的代码移到正文的底部，但实际上有一种更加万无一失的方法来确保这些代码在正确的时间运行; 一种告诉浏览器“运行我的代码之后的方法”你已经在页面中完全加载并创建了DOM。“除了将代码移动到正文的底部之外，还有另一个 - 并且，有人可能认为用代码来做这个更清晰的方法。

以下是它的工作原理：首先创建一个包含您喜欢的代码的函数页面完全加载后执行。完成后，你拿走了 window 对象，并将该函数指定给其 onload 属性。 window对象将调用您已分配给其onload属性的任何函数，但仅在页面完全加载后调用。检查一下： -

<html>
<head>

<script>

    var i=0;
    var u=0; //0:redy for the next FX
    var newstext;

    function renews() {

        if(i%2==0){
            newstext = "aaa";
        } else {
            newstext = "bbb";
        }
            document.getElementById("news").innerHTML = newstext;
            i++;
    }
    //renews(); // this doesn't work
    window.onload = renews; //But this will work
    setInterval(function(){
    renews();
    },3000);
</script>
</head>

<body>
    <span id ="news">test</span>
</body>

现在，即使您将JavaScript代码放在一个单独的JS文件中并将其导入到标头标记中，而不是将其移动到正文的末尾，您的代码也可以正常工作。

带间隔的JavaScript函数第一次不起作用

2 个答案: