ExtJS 4.2 LoadMask在函数调用后才显示的问题排查

这是因为JavaScript是单线程执行模型：

• myMask.show() 触发的DOM更新操作会被浏览器放到异步任务队列，不会立刻执行
• 紧接着的fillDisplayStore是同步耗时操作，会完全占据主线程，阻塞所有UI渲染任务，直到这个函数执行完毕，浏览器才有机会处理遮罩的渲染

断点时浏览器会暂停代码执行，主线程空闲下来，自然能完成遮罩的渲染，所以看起来正常。

修复方案 #

把耗时函数放到异步任务队列中，让浏览器先完成遮罩渲染，再执行函数。有两种常用方式：

1. 使用setTimeout（哪怕延迟0毫秒，也能将任务转入异步队列）：

var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();

// 将耗时函数放入异步队列，先让浏览器渲染遮罩
setTimeout(function() {
    fillDisplayStore(store, loadedStore);
    // 函数执行完成后记得隐藏遮罩
    myMask.hide();
}, 0);

2. 使用ExtJS自带的Ext.Function.defer（更贴合ExtJS开发习惯）：

var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();

// 延迟执行耗时函数，延迟0毫秒即可
Ext.Function.defer(function() {
    fillDisplayStore(store, loadedStore);
    myMask.hide();
}, 0);

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