[gelöst] Verzögerung beim Schliessen des Dialogfensters (Popup) verhindern

[Clyde]

Das über das onclick angestoßene Schliessen des Popup-Fensters ist um einige Sekunden verzögert gegenüber dem Schließen mit dem Close-X des Fensters.

Kann man diese Verzögerung verhindern? Wo kommt sie her?

Code Auswählen Erweitern


<div data-type="popup" data-height="200px" data-width="200px">
<div
data-type="symbol"
data-off-color='blue'
data-background-icon="fa-circle"
data-icon="fa-star"
class="small">
</div>

<div class="dialog">
<div>Überschrift</div><br><br><br>
<div
onclick="$('.dialog-close').trigger('click');"
data-type="symbol"
data-off-color='blue'
data-background-icon="fa-circle"
data-icon="fa-star"
class="small">
</div>
</div>
<div>Test</div>
</div>


[setstate]

Gefühlt Sekunden. Laut Spec sind das eher 300ms. Das ist der tap Delay des Browsers, um zu erkennen, ob der User Scrollen will oder wirklich clickt.
Wenn du diese Sicherheit nicht brauchst (ausversehen Klicken beim scrollen), kannst du auch auf ontouchstart respektive onmousedown gehen. Das reagiert sofort.

[Clyde]

Bei mir sind es wirklich 2-3 manchmal mehr Sekunden und es hemmt einen zügigen Ablauf. Das von dir angesprochene Delay von 300ms wäre kein Problem. ontouchstart reagiert gar nicht und bei onmousedown ist kein Unterschied zu onclick zu spüren.

Könnte es noch eine andere Ursache geben? Der Close-X Button reagiert sofort. Darauf 300ms wäre ok.

[Clyde]

Beim circlemenu reagiert es so fix wie ich es mir vorstelle. Gibt es da nicht auch dieses Browserdelay?

Code Auswählen Erweitern


<div data-type="circlemenu" class="" data-direction="horizontal" data-circle-radius="-100">
<ul>
  <li><div data-type="symbol" class="small narrow" data-off-color='orange' data-background-icon="fa-circle" data-icon="fa-star"></div></li>
  <li><div data-type="symbol" data-off-color='blue' data-background-icon="fa-circle" data-icon="fa-star" class="small"></div></li>
  <li><div data-type="symbol" data-off-color='blue' data-background-icon="fa-circle" data-icon="fa-star" class="small"></div></li>
  <li><div data-type="symbol" data-off-color='blue' data-background-icon="fa-circle" data-icon="fa-star" class="small"></div></li>
</ul>
</div>


[setstate]

Ich versuche bei allen Widgets Click als Event zu vermeiden. Aus den o.g. Gründen.

Das bei dir mousedown genauso reagiert ist sehr komisch. Muss was am Browser sein. Reagieren andere auch so langsam?

[Clyde]

Verzögerung beim Onclick-schließen des Popups

Win10 Chrome ca. 2-3s
Win10 Opera ca. 2-3s
Win10 Edge ca. 4-7s

Android Fully 4-8s
Android Chrome 3-5s

Circlemenu bzw. der Close-X reagiert überall sofort.

Habe Heute morgen ein Update laufen lassen FHEM/FTUI.
Verzögerungen waren vorher auch schon da.

[Clyde]

Da sich hier keine Lösung auftut, werde ich wohl auf circlemenu umstellen, das reagiert wesentlich fixer. Bietet leider aber nicht die Möglichkeiten einen Hinweis anzuzeigen. Dafür werde ich nun eine Ansage einbauen.

Code Auswählen Erweitern


<div data-type="circlemenu" class="circlemenu noshade" data-direction="top-left" data-circle-radius="300">
<ul>
  <li><div data-type="image" class="cell" data-size="70px" data-url="./images/avatare/80_star_1.jpg" data-fhem-cmd="set Tablet1 ttsmsg [dienst_28:note]"></div></li>
  <li><div data-type="symbol" data-off-color='#000000' data-background-icon="fa-circle" data-icon="fa-close" class="big"></div></li>
  <li><div data-type="image" data-size="70px" data-url="./images/avatare/80_star_0.jpg" data-fhem-cmd="{my_dienst_do(   28,6)}"></div></li>
  <li><div data-type="image" data-size="70px" data-url="./images/avatare/80_star_0.jpg" data-fhem-cmd="{my_dienst_do(   28,6)}"></div></li>
  <li><div data-type="image" data-size="70px" data-url="./images/avatare/80_star_0.jpg" data-fhem-cmd="{my_dienst_do(   28,6)}"></div></li>
</ul>
</div>


Wäre trotzdem mal interessant zu wissen, ob das POPUP nur bei mir solche Verzögerungen hervorbringt? Wie schnell schließt sich das bei Euch, wenn ihr onclick verwendet?

[sinus61]

Bei mir gehen die Popups sofort zu, egal ob über das X oder einen extra Button. Sowohl unter Android mit Fully oder Windows mit Firefox.

[Clyde]

Danke für die Rückmeldung. Bei mir dauert es wie gesagt so lange, daß man ungeduldig wird. 

[Clyde]

[Ursache gefunden!]

Die Ursache war ein etwa 100kB großes Reading, welches bei mir in einem anderen Popup dargestellt werden kann.

Scheinbar beeinflussen sich die Popup-Widgets gegenseitig. Jedenfalls verzögert es das Schliessen eines anderen Popup Fensters, obwohl es selbst nicht offen ist.
Könnte mir vorstellen, daß dieser Einfluß evtl. auch anderswo unschöne Verzögerungen hervorruft.

@setstate
Vielleicht mal zur Kenntnis nehmen, die Ursache war schwer zu finden.
   

Code Auswählen Erweitern


<div data-type="popup" data-height="550px" data-width="600px">
<div data-type="symbol" data-icon="fa-star" ></div>
<div class="dialog">
<div  data-type="label" data-device="bericht" data-get="protokoll_long"></div>
</div>
</div>


[setstate]

Guter Punkt! Aber wirklich schwer zu finden.

Dann muss das onclick selektiver werden.

Gib dem Popup eine ID

<div    data-type="popup" id="popup1"

Und benutze diese im Selector

   onclick="$('#popup1 .dialog' ...

[Clyde]

Bekomme ich nicht umgesetzt bzw. schließt so nicht:

Code Auswählen Erweitern


<div data-type="popup" id="popup1" data-height="500px" data-width="500px">
<div data-type="analogclock" data-size="68" data-second="none"></div>
<div class="dialog">
<div data-type="button" data-fhem-cmd="{my_dienst_do(   1,1)}" onclick="$('#popup1 .dialog').trigger('click');"></div>
<div data-type="button" data-fhem-cmd="{my_dienst_do(   2,1)}" onclick="$('#popup1 .dialog').trigger('click');"></div>
</div>
</div>


[setstate]

Sorry, ich hatte zu kurz kopiert

onclick="$('#popup1 .dialog-close').trigger('click');"

[Clyde]

Ich hab jetzt mal Zeit zum Testen gehabt. Aber wenn ich das so wie gezeigt mit

id="popup_1"

und

onclick="$('#popup_1 .dialog-close').trigger('click');"

aufrufe schließt sich das Dialog-Fenster bei mir nicht (PC und Android).

Code Auswählen Erweitern

<div data-type="popup" id="popup_1" data-height="200px" data-width="300px">

<div data-type="push" data-icon="fa-star"></div>

<div class="dialog"><div>Test</div><br>

<div data-type="button" data-fhem-cmd="set HandyNickel ttsmsg Test" onclick="$('#popup_1 .dialog-close').trigger('click');"></div>

</div>

</div>


Ist da noch ein Fehler drin?

[Clyde]

Code Auswählen Erweitern

onclick="$('#popup_1.dialog-close').trigger('click');

Funktioniert (ohne Leerzeichen) ab FTUI 2.6.4!