Question

我可能会感到毛骨悚然，但我正在测试一些东西，我有点不明白这三个事件的目的......
所以这是我的测试代码：

    <div id="timeBU"></div>
    <div id="timeL"></div>
    <div id="timeUL"></div>
    <div id="text"></div>
    <script type="text/javascript">
        function loading(message, timeId) {
            var secs=0;
            var interval = setInterval(function() {
                document.getElementById(timeId).innerHTML = secs;
                secs++;
            },1);
            document.getElementById("text").innerHTML += "<br>"+message+"<br>";
        }

        // first way
        window.addEventListener("beforeunload", loading("beforeunload", "timeBU"));
        window.addEventListener("load", loading("load", "timeL"));
        window.addEventListener("unload", loading("unload", "timeUL"));

        // second way
        // window.onunload = loading("beforeunload", "timeBU");
        // window.onload = loading("load", "timeL");
        // window.onbeforeunload = loading("unload", "timeUL");
    </script>

这不重要我使用第一种方式或第二种方式，但无论如何我发布了两个... 我的意思是，输出取决于 //第一路代码或 //第二路代码的顺序，首先添加该侦听器，首先显示该功能的消息...你可以尝试交换场所......但是时间是一样的（你可以增加间隔或警告某些东西以获得更好的视图），这让我觉得所有三个事件都表现相同......
> 注意：我仅针对chrome进行了测试

我的额外问题是：
如果用户只是打开我的网站或重新加载，我该如何区别？

如果您对我的额外问题有任何建议，我将不胜感激......

Answer 1

由于您正在调用 loading()功能，因此未用作回调：

window.addEventListener("beforeunload", loading("beforeunload", "timeBU"))

该行调用loading()（以便打印您的消息）并将其返回值（无）传递给addEventListener()作为回调。事件将被解雇时不会执行任何操作。

这不是我建议的方式，而是尝试这样做：

window.addEventListener("beforeunload", function () {
    loading("beforeunload", "timeBU")
});

Answer 2

这段代码对我有用。（在firefox＆amp; chrome中测试过）。现在唯一的区别是loading（message，timeId）现在返回一个被调用为回调的函数。事件总是要求您传递一个Callback（引用一个函数），一旦调用该事件就会调用它。

<div id="timeBU"></div>
<div id="timeL"></div>
<div id="timeUL"></div>
<div id="text"></div>
<script type="text/javascript">
    function loading(message, timeId) {
        return function(){
            var secs=0;
            var interval = setInterval(function() {
                document.getElementById(timeId).innerHTML = secs;
                secs++;
            },1);
            document.getElementById("text").innerHTML += "<br>"+message+"<br>";
        }
    }


    window.addEventListener("beforeunload", loading("beforeunload", "timeBU"));
    window.addEventListener("load", loading("load", "timeL"));
    window.addEventListener("unload", loading("unload", "timeUL"));
</script>

onload，onunload，onbeforeunload之间的差异

2 个答案: