Question

我想知道为什么这个代码在一个项目中工作，但是只要我添加一个window.addEventListner（＆＃34; load＆＃34;）函数就停止工作。

原始工作代码

<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello</title>
    </head>
    <body>
        <button id="click">Click</button>
    </body>
</html>

<script>
    var count = 0;
    var timeout;
    function test() {
        console.log(count);
        count = count + 1;
        timeout = setTimeout("test()", 1000);
    }

    document.getElementById("click").addEventListener("click", function (e) {
        test();
    }, false);
</script>

修改后的Javascript代码，它给了我这个错误＆＃39; ReferenceError：test not defined。

window.addEventListener('load', function () {
        var count = 0;
        var timeout;
        function test() {
            console.log(count);
            count = count + 1;
            timeout = setTimeout("test()", 1000);
        }

        document.getElementById("click").addEventListener("click", function (e) {
            test();
        }, false);
}

Answer 1

语法错误，缺少结束)

window.addEventListener('load', function() {
  var count = 0;
  var timeout;

  function test() {
    console.log(count);
    count = count + 1;
    timeout = setTimeout(test, 1000); //observe this change as well.
  }

  document.getElementById("click").addEventListener("click", function(e) {
    test();
  }, false);
}); //this final `)` was missing

<强>演示

window.addEventListener('load', function() {
  var count = 0;
  var timeout;

  function test() {
    console.log(count);
    count = count + 1;
    timeout = setTimeout(test, 1000);
  }

  document.getElementById("click").addEventListener("click", function(e) {
    test();
  }, false);
});

<button id="click">Click</button>

注意

代码中的以下行

timeout = setTimeout("test()", 1000);

原因

“message”：“脚本错误。”

因此已改为

timeout = setTimeout(test, 1000);

Answer 2

最后，我知道你的意思，试着在你的控制台上运行它：

var site = "global";

function foo() {
    var site = "partial";
    setTimeout('alert(site);', 100);
}
foo();

好的，告诉我，你有什么？部分还是全球？

抱歉，这是全球性的！

那是因为，setTimeout（第一个参数）中的字符串是在全局范围内执行的，所以当＆＃39; alert（site）＆＃39;执行，它会找到

var site = "global";

永远不会找到

var site = "partial";

因为这个站点在函数foo范围内，一般来说，除了闭包之外，我们不能访问函数范围内定义的变量。在这种情况下，我们无法访问全局范围内foo中定义的变量站点。因此，如果您没有在全局中定义网站，您将收到错误，例如：

var s = "global";

function foo() {
    var site = "partial";
    setTimeout('alert(site);', 100);
}
foo();

你有什么收获？

未捕获的ReferenceError：未定义网站

这正是您添加window.addEventListner（＆＃34; load＆＃34;）函数后出现错误的原因。现在，请注意以下代码，尤其是注释。

<script>
// when you visit function test in the setTimeout,you visit it here!
// you didn't define another function test in the global,
//if you defined,it will execute this function test
 window.addEventListener('load', function () {
        var count = 0;
        var timeout;

        function test() {
            console.log(count);
            count = count + 1;
            timeout = setTimeout("test()", 1000);
            // you can't visit function test in the global,because function test is defined in this anonymous function
        }

        document.getElementById("click").addEventListener("click", function (e) {
            test();
        }, false);
});
</script>

继续，看看这个

<html>

<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>

<body>
    <button id="click">Click</button>
</body>

</html>
<script>
function test() {
    console.log('in the global')
};
window.addEventListener('load', function() {
    var count = 0;
    var timeout;

    function test() {
        console.log(count);
        count = count + 1;
        timeout = setTimeout("test()", 1000);
    }

    document.getElementById("click").addEventListener("click", function(e) {
        test();
    }, false);
});
</script>

你怎么了？

0

在全球

所以，我想您现在明白了，我们将讨论如何解决问题，只需删除＆＃34;＆＃34;或者＆＃39;＆＃39;和（），使用函数名称很好。

timeout = setTimeout(test, 1000);

这会使它正常执行。实际上，我们不使用以下类型，

timeout = setTimeout("test()", 1000);

由于历史原因，你可以看到这种代码，但我们不建议，它会消耗性能，这一切，希望你能理解。

为什么这段代码在测试中工作，但是在加载事件时却没有

2 个答案: