如何解决Javascript中blockUI结合setTimeout时重定向提前执行问题？

哦，这个坑我踩过！你遇到的是JavaScript单线程异步机制导致的典型问题——你的URL.Redirect("RedirectURLfunctionName")是同步执行的代码，它会在$.blockUI执行完后立刻触发页面跳转，浏览器直接卸载当前页面，setTimeout里的逻辑根本没机会运行。

问题根源 #

JavaScript是单线程的，代码执行顺序遵循这个规则：

1. 先执行所有同步任务（比如$.blockUI和URL.Redirect）
2. 同步任务全部执行完后，才会去任务队列里取异步任务（比如setTimeout的回调）
   所以你的重定向直接打断了整个流程，定时器还没到时间页面就跳走了。

解决方案 #

把重定向操作放到setTimeout的回调函数里，这样就能保证先阻塞页面3秒，执行完$.unblockUI后再触发跳转。

修改后的代码如下：

$.blockUI({ 
  message: "block message", 
  css: { border: 'none', padding: '15px' } 
}); 

setTimeout(function() {
  $.unblockUI(); // 先解除页面阻塞
  URL.Redirect("RedirectURLfunctionName"); // 再执行重定向
}, 3000);

额外说明 #

如果担心$.unblockUI的动画还没完成就跳转，也可以给重定向再加个极短的延迟，但一般情况下上面的写法就足够了——因为$.unblockUI是同步执行的DOM操作，会在重定向之前完成。

内容的提问来源于stack exchange，提问作者Gül ÖZCAN