in Click-Ereignis mit jquery für ui Latente machen

Question

ich diesen Code haben:

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

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

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

Ich würde dieses Verhalten haben:

1. zeigen Warte Panel die richtige Klasse in einem div und fügte hinzu: dies geschehen ist von showWaitPanel();
2. nach, dass ich eine große Anzahl von Vektor-Ebene in openlayers3 Karte
3. wenn Sie fertig sind, die Warteplatte gesetzt verstecken mit hideWaitPanel() hinzufügen, die eine Klasse von einem div

Das Problem entfernen ist, dass mit In diesem Code wird die Benutzeroberfläche nicht gerendert, da die Vektorenzeichnung mehr Ressourcen erfordert und daher die Benutzeroberfläche einfriert. So sehe ich nicht das Wartefeld, und die Benutzeroberfläche wird eingefroren, bis die Vektorebenen auf der Karte gezeichnet sind.

Wie kann ich das Wartefeld vor den Zeichnungen rendern?

Ich habe über latente Methode gelesen, aber ich weiß es nicht sehr gut.

Danke für jede Unterstützung.

Answer 1

Sie müssen wahrscheinlich jede Stufe in einen anderen Ereignisthread zwingen, was auf verschiedene Arten erreicht werden kann.

Mit window.setTimeout()

Diese einfache und sollte funktionieren trotz syntaktisch hässlich zu sein.

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

ein Versprechen

Der Nettoeffekt hier sollte sehr ähnlich setTimeout() zu verwenden sein verwenden, aber es wird nur dann, wenn showWaitPanel() gibt ein Versprechen arbeiten, sonst showWaitPanel().then() wird einen Fehler werfen. Sie müssten also Ihre showWaitPanel() Funktion ändern.

$("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, mit einem Versprechen ist Overkill hier. Wenn es funktioniert, würde ich setTimeout() trotz seiner Hässlichkeit verwenden.