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中添加正确的类：这是由showWaitPanel（）;
之后我在openlayers3 map
完成后，等待面板设置为hide 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()返回承诺时才会起作用，否则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，使用承诺在这里过度杀伤。如果它有效，我会使用setTimeout()尽管它很丑陋。

使用jquery for ui render在click事件中延迟

1 个答案: