在前端开发中，我们通常会使用 AJAX 发送异步请求。然而，在某些情况下，当用户离开当前页面时，可能需要确保已经发送的 AJAX 请求得到了响应。本文将介绍如何通过 jQuery 的 $(window).unload 事件来等待 AJAX 请求完成后再离开网页。
问题背景
假设我们有一个网页，其中包含一个表单，用户可以填写并提交数据。提交数据时，我们使用 AJAX 发送请求，并在页面上显示一个“正在保存”提示。但是，如果用户在请求还没有完成的情况下离开了当前页面，该请求将被取消，数据也将无法被保存。这是一个非常不好的用户体验，因此我们需要一种方法来等待 AJAX 请求完成后再允许用户离开页面。
解决方案
我们可以使用 jQuery 的 $(window).unload 事件来监听用户离开当前页面的行为。当用户尝试关闭页面或刷新页面时，我们可以触发该事件，并在事件处理函数中检查是否有未完成的 AJAX 请求。如果有未完成的 AJAX 请求，则阻止用户离开页面，直到请求完成。
以下是实现的示例代码：
-- ----------------------- ---- ----
--- --------- - --
-- ----- ---- ------
-------------------------- --------------- ---- --------- -
-- -------- ---- --------- -
------------
---
-- ----- ---- ------
------------------------------ ---------- -
-- ------ ---- --------- -
------------
---
-- -- ------------- --
---------------------- ---------- -
-- ------- ---- ------------
-- ---------- - -- -
--- ------- - ----------------------
------ --------
-
---上面的代码中，我们创建了一个计数器变量 ajaxCount，用于跟踪未完成的 AJAX 请求数量。在每个 AJAX 请求开始时，我们将计数器加 1，在每个 AJAX 请求完成时，我们将计数器减 1。当用户尝试离开页面时，我们检查计数器的值是否大于 0，如果是，则返回一个确认消息，询问用户是否要离开页面。
总结
使用 $(window).unload 事件可以很好地解决用户离开页面时可能遇到的未完成的 AJAX 请求问题。通过跟踪未完成的请求数量，我们可以确保所有请求都已经得到响应后再允许用户离开页面，从而提高用户体验和网站的可靠性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28617