BlockUI插件页面刷新后光标持续处于加载状态问题排查

嘿，这个问题我之前也碰到过，咱们来好好拆解一下～

首先明确一点：这不是Chrome浏览器的特有行为，在Firefox、Edge等主流浏览器里都可能出现，核心原因是浏览器事件循环的执行顺序和页面卸载的时机问题。

问题根源 #

当你连续执行$.blockUI()和location.reload()时，浏览器的事件循环还没来得及完成BlockUI修改鼠标指针状态的DOM操作，就已经触发了页面卸载流程。而部分浏览器在处理页面卸载时，不会主动重置之前设置的鼠标样式，导致刷新后的新页面继承了这个“加载中”的指针状态。

解决方案 #

给BlockUI留一点时间完成DOM和样式的修改，再触发页面刷新。最简单的方式是用setTimeout把location.reload()延迟一小段时间执行：

$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
setTimeout(() => {
  location.reload();
}, 100); // 100ms足够BlockUI完成所有状态设置

这个延迟会把页面刷新的操作放到下一个事件循环周期，让BlockUI有足够时间把鼠标指针改成加载样式，之后再触发页面卸载。这样浏览器在刷新后就不会残留异常的指针状态了。你也可以根据实际情况调整延迟时长，一般50-200ms就足够，不需要太长。

内容的提问来源于stack exchange，提问作者Vincent Decaux