代码之家 › 专栏 › 技术社区 › michele

使用jquery for ui呈现延迟的点击事件

jquery-deferred openlayers-3 promise

0

michele · 技术社区 · 9 年前

我有这个代码:

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

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

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

我会有这样的行为:

之后,我在openlayers3映射中添加了大量矢量层
完成后,使用hideWaitPanel()将等待面板设置为hide,以从div中删除类

问题是,使用此代码时,不会呈现UI,因为矢量绘图需要更多资源,因此会冻结UI。所以我看不到等待面板,UI被冻结,直到在地图上绘制矢量层。

如何在绘制之前渲染等待面板?

我读过关于延迟方法的书,但我不太了解它。

感谢您的支持。

1 回复 | 直到 9 年前

1

Roamer-1888 9 年前

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

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.
});

这里的净效应应该与使用 setTimeout() showWaitPanel() 返回一个承诺,否则 showWaitPanel().then() 将抛出错误。所以你需要修改你的 显示等待面板() 作用

$("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,在这里使用承诺是过分的。如果有效,我会使用 设置超时() 尽管它很丑陋。