如何通过JavaScript延迟离开页面？

Question

我想在人离开页面前添加1000毫秒的延迟。 我正在使用beforeunload事件启动jquery动画，并希望在页面离开之前完成它。

我不关心旧版浏览器，只对IE9、最新版本的Safari、Chrome和FF4感兴趣。

编辑：好吧，我希望仅在导航到内部页面时实施它。 当然，我可以使所有内部链接成为javascript调用，但我更喜欢一种不那么粗暴的方法。

另外，我没有阻止人们离开页面，甚至没有让他们等待很长时间，淡出需要1秒钟？这不比我玩的每个游戏在选择退出时淡出差吧。

如果我问如何防止一个人离开页面，那么所有的“不要这样做”都是应该的。

- Justin808

---

这种行为是不可取的。我强烈建议不要这样做。 - Mark

有人做了-1并不是+1的理由 - 这不是一个好问题。 - Konerak

没错，但有人可能会说没有坏问题，而且楼主可能是无心之失... ;) - mattsven

Answer 1

首先，如果人们想离开您的页面，请不要设置任何障碍或困难以使其离开。只需让他们离开即可。 Konerak说得很好...

引用： 使用阻止操作是可以接受的，当用户即将因离开页面而丢失数据时，但是对于动画和花哨的效果使用它们会很快让您的用户感到恼怒。

其次，您只能使用阻止操作（例如alert()或prompt()）来防止自动关闭，该操作暂时阻止浏览器的视口，等待用户响应。 jsFiddle。

- alex

---

@Konerak 说得太好了。 - alex

Alex，感谢你的回答。我想可能有一种方法可以延迟操作，因为你可以通过确认来取消它。我计划仅在导航到内部页面时使用它，但是在查看后，事件中没有告诉我他们要去哪里的信息，所以我不得不将所有导航都包装在JavaScript调用中。 - Justin808

Answer 2

我本来希望只在浏览内部页面时实现它。

我知道现在已经过去了四年，但我想指出，在您描述的范围内，您确实可以这样做。

$(document).on("click", "a", function (e) {// Listen for all link click events on the page (assuming other scripts don’t stop them from bubbling all the way up)
    // Stop the link from being followed.
    e.preventDefault();

    // Grab the link element that was clicked
    var linkClicked = e.target;

    // I'm using setTimeout to just delay things here, but you would do your animation and then call a function like this when it’s done
    window.setTimeout(function () {

        // Simulate navigation
        window.location = linkClicked.href;
    }, 1000);

    return false;
});

这仍然是不可取的：

• 我怀疑用户很快就会感到烦恼
• 如果没有额外的代码，这将阻止用户使用命令/控制+点击在新标签页中打开链接。

- Paul D. Waite

Answer 3

8年后，我将为自己的网站编写代码，实现页面之间渐变过渡效果。但我只打算在网站内部跳转页面时使用此功能，而不会使用window.onbeforeunload或者 window.onclick。我会在每个页面上的特定“按钮”上附加单击事件处理程序。pointer-events甚至被禁用于其他元素，因此事件的元素范围非常有限。代码是一个switch()语句，并为每个“按钮”设置不同的情况，每个按钮可以导航到网站中的特定页面。

我认为这并不是糟糕的网页或网站行为。页面之间进行1秒的过渡不会让用户感到烦恼。如果包括目标页面加载数据所需的时间，还可以多达2秒或更长时间，同时也可以逐渐淡入加载目标页面，从视觉上看非常优雅。

尤其是与布局灵活的新闻/信息网站相比，这种渐变过渡效果非常漂亮，那些页面在加载时会不停地移动，需要花费2秒甚至更长的时间才能阅读内容。

我的网站已经充满了CSS和SVG动画，所以将其添加到内部页面导航对于这个项目来说是小菜一碟。如果您限制用户事件的元素范围并使延迟时间短，则这是良好的行为，而不是坏行为，在我看来，视觉优雅具有价值。

编辑- 当我深入研究时，我发现对于一组类似的页面，通过将它们合并成一个页面，我可以实现更好的交叉淡入淡出效果。这样，我就可以真正地在每个子页面之间进行交叉淡入淡出，而不是淡出一个页面然后淡入另一个页面。

- Sideways S