在 jquery 的点击事件中延迟 ui 渲染

Question

我有这个代码：

    $("input#drawAllRoutes").click(function (e) {
        console.log("drawAllRoutes: Start Drawing");
        showWaitPanel();

        ...
        //foreach routeElement add vector layer on map
        ...

        console.log("drawAllRoutes: Ok ");
        hideWaitPanel();
    })

我会有这样的行为：

显示等待面板在 div 中添加正确的 class：这是由 showWaitPanel();
之后我在openlayers3地图中添加了大量的矢量图层
完成后，等待面板设置为隐藏，使用 hideWaitPanel() 从 div

问题在于使用此代码，UI 未呈现，因为矢量绘图需要更多资源，因此冻结了 UI。所以我没有看到等待面板，UI 被冻结，直到在地图上绘制矢量图层。

如何在绘图前渲染等待面板？

我看过延迟方法，但我不是很了解。

感谢您的支持。

Answer 1

您可能只需要强制每个阶段进入不同的事件线程，这可以通过几种方式实现。

使用window.setTimeout()

这很简单，尽管在语法上很丑陋，但应该可以工作。

$("input#drawAllRoutes").click(function (e) {
    console.log("drawAllRoutes: Start Drawing");
    showWaitPanel(); // assumed to be synchronous.
    window.setTimeout(function() {
        ...
        //foreach routeElement add vector layer on map
        ...
        hideWaitPanel(); // ok in same event thread unless vector rendering is itself asynchronous.
        console.log("drawAllRoutes: Ok");
    }, 0); // even with a timeout of zero seconds, the passed function will execute in a later event thread.
});

使用承诺

这里的nett效果应该和使用setTimeout()非常相似，但是只有在showWaitPanel() returns一个promise时才会生效，否则showWaitPanel().then()会报错.所以你需要修改你的 showWaitPanel() 函数。

$("input#drawAllRoutes").click(function (e) {
    console.log("drawAllRoutes: Start Drawing");
    showWaitPanel().then(function() {
        ...
        //foreach routeElement add vector layer on map
        ...
        hideWaitPanel(); // ok in same event thread unless vector rendering is itself asynchronous.
        console.log("drawAllRoutes: Ok");
    });
});

TBH，在这里使用 promise 有点矫枉过正。如果可行，我会使用 setTimeout()，尽管它很丑。

在 jquery 的点击事件中延迟 ui 渲染

Deferred in click event with jquery for ui render

promise

jquery-deferred

openlayers-3