遞延的單擊事件使用jQuery的UI渲染

我有這樣的代碼：遞延的單擊事件使用jQuery的UI渲染

$("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地圖一個高數矢量層的
與hideWaitPanel（），其從一個div刪除類完成後，等待面板被設置隱藏

的問題是，與此代碼，UI不會呈現，因爲向量繪圖需要更多資源並凍結UI。所以我沒有看到等待面板，UI凍結，直到在地圖上繪製矢量圖層。

如何在繪圖之前呈現等待面板？

我已閱讀關於延期方法，但我不太清楚它。

感謝您的支持。

來源

2016-07-31 michele

您可能只需要強制每個階段進入不同的事件線程，這可以通過幾種方法實現。

使用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()將拋出一個錯誤。所以你需要修改你的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()。

來源

2016-07-31 13:43:04

遞延的單擊事件使用jQuery的UI渲染

回答

相關問題