Pineingabe auf iPad extrem langsam

[StephanSchuler]

Hallo,

ich habe für ein Intranet ein Frontend gebaut auf dem man sich per 4-stelligem Pin einloggen kann.
Das funktioniert soweit auch. Nun haben wir ein iPad Pro an die Wand gehängt das für alle Mitarbeiter zugänglich ist und hier ist die Pineingabe sehr langsam. Auf dem Desktop PC ist sie super schnell.

Ich habe einfach DIVs mit den Ziffern und per JS drauf ein EventListener angelegt. Dieser ruft dann nur eine Funktion newNumber() auf um die neue Ziffer an den code anzuhängen und ein Sternchen auszugeben. Sind alle 4 Ziffern eingeben wird ein Formular abgesendet um den Code an PHP zu übergeben. Anbei der Codeauszug:

<div class='login_pinpad'>
    <form  name="pinpadform" id="new_form" action="" method="post" enctype="multipart/form-data" >
        <input type="hidden" name="formular" value="pinpadform" />
        <input type="hidden" name="pincode" id="pincode" value="1" />
    </form>

<?PHP
    //Ausgabe der Zifferbuttons
    for($i=1; $i<=9; $i++){
        echo '<div id="button'.$i.'" class="ziffer">'.$i.'</div>';
    }
?>
</div>



<script type="text/javascript">
var button1 = document.getElementById("button1");
//identisch für alle weiteren Buttons   

   
button1.addEventListener('click', function(){ newNumber(1) });   
//identisch für alle weiteren Buttons
   
   
function newNumber (number){
    code = code + number;

    //Der Code wird an dieser Stelle in Sternchen gewandelt und dann als Ausgabe an die Webseite geben.
    //Hier der Einfachheit halber nur sehr verkürzt dargestellt.
    showcode.innerHTML = codemask;
   
    //Schreibe Code in ein verstecktes Formularfeld für die übergabe an PHP
    //pincode ist die ID des Formularfeldes
    pincode = document.getElementById("pincode");
    pincode.value = code;       

    //alle Ziffern eingebenen sende Code an Server
    var codestellen = code.length;
    if(codestellen == 4){
        setTimeout(function() {
            document.forms["pinpadform"].submit();
        }, 400);           
    }
}
</script>

Hat irgend jemand eine IDee wieso das am PC super schnell ist und auf dem iPad man zwischen jeder Ziffer ca. 0,8s warten muss?

Grüße,
Stephan

 

[Myhar]

Da ich kein iPad hier habe kann ich nur raten: zu viel JS macht mobile Browser generell langsamer, die sind da etwas sparsamer mit den ressourcen. Vorschlag meinerseits deshalb: Wieso werden hier event-listener auf divs gesetzt, wenn man dafür auch buttons nehmen kann? Ok, die event-listener hat man dann trotzdem, aber div-suppe ist seit dem letzten Jahrtausend out
Warum für jeden Button einen eigenen eventListener anstatt global für alle buttons einen eventListener erstellen, welcher dann dynamisch die Zahl ermittelt? Es lässt sich doch leicht der index eines Elements ermitteln, bzw. man arbeitet hier am Besten wohl mit data-Attributen. data-value an jedem <button> anhängen, und dieser Wert wird dann angehängt.
Wieso kein einfaches text-feld zur code-eingabe anbieten, das wäre wohl am schnellsten für ipad (+co)

Zusammengefasst: Deine Lösung ist allgemein nicht elegant und ressourcenschonend, da darf man sich nicht wundern, wenn es irgendwo mal langsam wird. Sicher, sie funktioniert, bei performance Problemenen wird man um einen umbau nicht herum kommen.

 

[StephanSchuler]

Also wenn ich die Button sowieso mit JS Abfrage und nicht zum Absenden des Formulars verwende, dann ist es ja ega lob ich mit DIVs oder Buttons arbeite. Ich habe die Button-Variante nicht verwendet, da ich nicht bei jeder Ziffer das Formular absenden möchte. Das würde das Ganz ja noch langsamer machen.

Wenn ich ein einfaches Textfeld nutze, dann muss ich die iPad Tastatur verwenden. Das möchte ich eigentlich vermeiden, denn es soll wie die Pin-Eingabe von einem Handy aussehen. Wenn ich die Tastatur ausklappen lasse ist auch nur noch die halbe Webseite zu sehen.

Alle EventListener zusammen zu fassen werd ich mal versuchen. Hab ich noch nie gemacht, da muss ich mich erst schlau machen. Mal sehen ob das was bringt.

 

[Myhar]

Die Verwendung von buttons oder divs macht in Hinsicht auf die js-events keinen Unterschied.

Ich habe die Button-Variante nicht verwendet, da ich nicht bei jeder Ziffer das Formular absenden möchte. Das würde das Ganz ja noch langsamer machen.

Wie kommst du darauf, dass du bei buttons das Formular jedesmal abschicken musst? Du kannst mit buttons 1:1 die selbe Funktionsweise wie mit divs erreichen.

Wenn ich ein einfaches Textfeld nutze, dann muss ich die iPad Tastatur verwenden. Das möchte ich eigentlich vermeiden, denn es soll wie die Pin-Eingabe von einem Handy aussehen. Wenn ich die Tastatur ausklappen lasse ist auch nur noch die halbe Webseite zu sehen.

Wenn du <input type="number"> verwendest, dann wird auch nur die Nummern Tastatur angezeigt.
Sicher, die Tastatur blendet einen Teil der Website aus, aber so ist die "halbe Website" mit div-buttons ausgefüllt, macht in meinen Augen nicht wirklich einen Unterschied. Zumindest wollen die Leute sich ja einloggen und nicht die Website ansehen, sonst wären die .8 Sekunden Wartezeit wohl kein Problem sondern eher erwünscht.

Alle EventListener zusammen zu fassen werd ich mal versuchen. Hab ich noch nie gemacht, da muss ich mich erst schlau machen. Mal sehen ob das was bringt.

Du hast mich hier missverstanden, du sollst sie nicht zusammenfassen sondern generell nur 1 Eventlistener verwenden.

<button data-value="1">1</button>


var buttons = document.querySelectorAll("button"),
        i = buttons.length;

    while(i--){
        buttons[i].addEventListener( "click", function(){ alert(this.dataset.value); } ); 
    }

Dieses Script gibt dir nun für jeden Button den du in der Seite hast den data-value Wert aus, unabhängig davon ob du 1, 10 oder 1000 Buttons hast.

 

[StephanSchuler]

Sorry, ich wollte eigentlich einen technischen Hinweis, was Javascript so extrem verlangsamen kann und keine Diskussion über DIVs oder was die Leute auf der Seite sehen wollen.

Dein EventListener-Code macht technisch übrigens das gleiche wie mein Code. Nur, dass er etwas eleganter geschrieben ist. Es werden exakt gleiche viele Instanzen des EventListener angelegt..

 

[Myhar]

Wenn man seinen Code in ein Diskussionsforum stellt muss man damit rechnen, auf Code aus dem letzten Jahrtausend hingewiesen zu werden. Ob du es dann umsetzt oder nicht kann schließlich niemand kontrollieren und ist im Endeffekt auch egal, gesagt gehört es nun mal.

Wenn meine Hilfe hier nicht weiter gewünscht ist, dann hoffe ich, dass du doch schnell eine für dich zufriedenstellende Lösung findest. Schließlich hast du bestimmt auch schon Lösungen wie diese ganz alleine gefunden http://stackoverflow.com/questions/12417085/slow-response-to-click-event-on-ipad

 

[StephanSchuler]

Wenn meine Hilfe hier nicht weiter gewünscht ist, dann hoffe ich, dass du doch schnell eine für dich zufriedenstellende Lösung findest. Schließlich hast du bestimmt auch schon Lösungen wie diese ganz alleine gefunden http://stackoverflow.com/questions/12417085/slow-response-to-click-event-on-ipad

Nein, hatte ich leider nicht! Dennoch danke dafür!