Frage Ändern Sie den Cursor-Typ für ein HTML-Dokument von Javascript


Nehmen wir an, ich habe eine JavaScript-Methode, die ein wenig zu lange dauert, um ohne Benutzer-Feedback zu beenden. In meinem Fall werden die Zeilen in einem Tabellenelement sortiert (alle im DOM; dauert nur zu lange, wenn es ein Menge von Reihen), aber es könnte alles tun. Ich möchte den "Fortschritt" -Cursor während der Ausführung anzeigen. Hier ist, was ich zur Zeit habe, aber ich habe auch einige andere Dinge ausprobiert:

// SORT   
document.body.style.cursor = "progress";
MyLongRunningMethod(); //blocks for 10-15 seconds before returning
document.body.style.cursor = "auto";    

Leider passiert nichts. MyLongRunningMethod () macht es richtig, aber der Cursor ändert sich nie. Mein Gedanke ist, dass der Browser warten muss, bis die Methode zurückkehrt, um die von der Fensterumgebung erzeugte Cursoränderungsnachricht verarbeiten zu können, aber das ist vielleicht weit weg und selbst wenn es wahr ist, weiß ich nicht, wie ich es beheben kann.

Irgendwelche anderen Ideen?


[Bearbeiten]: Ich entschied, dass die ganze Geschichte, die ich hatte, nicht wirklich notwendig war. Wenn Sie es wirklich lesen möchten, überprüfen Sie den Überarbeitungsverlauf.


Endgültige Ergebnisse

Am Ende habe ich RoBorgs Lösung verwendet. Es bringt den Code nicht so sehr durcheinander, wie ich ursprünglich dachte, weil ich die Funktion genau dort deklarieren kann - es ist so, als würde man einen Inline-Scope-Block hinzufügen.

Interessanterweise habe ich bei Firefox festgestellt, dass ich den Cursor gar nicht ändern muss. Ich habe festgestellt, dass nach dem Hinzufügen des setTimeout-Aufrufs manchmal ein Wartecursor angezeigt wurde, bevor der Fortschrittscursor festgelegt wurde, sodass ich meinen Cursorcode auskommentierte. Es stellt sich heraus, dass etwas in der Verwendung von setTimeout, um dies aus dem Click-Ereignis-Handler selbst zu schieben, es FireFox ermöglicht, selbst herauszufinden, dass der Cursor sich ändern sollte. Leider ist IE nicht so schlau, also habe ich den Cursor-Code zurück gesetzt.

Dies gibt meinem Glauben, dass eine Cursor-Änderung die geeignete Aktion ist, Glaubwürdigkeit - angesichts der Möglichkeit, was der Browser ohnehin tun wird. Ich möchte wirklich nicht neue Elemente hinzufügen und entfernen (wie ein beschäftigtes Bild eines Typs) in das DOM für eine Seite, von der ich sehr wenig weiß. Das Skript sollte übereinstimmen, unabhängig davon, welches visuelle Design die Seite verwendet.

Schließlich macht Chrome das Ganze irrelevant. Mit den gleichen Daten macht Chrome in weniger als 5 Sekunden, was IE und Firefox 10 bis 15 Sekunden dauerte. So ist ihre Javascript-Engine wirklich schneller. Ich kann nicht auf die Firefox 3.1 Engine warten. Leider benutzen die Leute hier immer noch meistens IE6.


5
2018-03-12 20:19


Ursprung


Antworten:


Ist ein Timer nicht in Frage?

document.body.style.cursor = "progress";

setTimeout(function()
{
    SortTable(cell.cellIndex, dir, sortType);
    document.body.style.cursor = "auto";
}, 10);

9
2018-03-12 20:23



Im Web ist das Ändern des Mauscursors nicht üblich und nicht nett.

Es ist viel besser (und einfacher), einige kleine Animationen auf der Seite selbst zu verwenden, überprüfen http://www.ajaxload.info/ für solche Bilder (es ist ein Online-Generator).


2
2018-03-12 20:49



Versuchen Sie, die Datei document.body.style.cursor = "auto" zu entfernen und sie in eine Funktion einzufügen, die nach Abschluss Ihrer SortTable-Funktion aufgerufen wird. Auf diese Weise behalten Sie den aktiven Cursor, bis die Funktion abgeschlossen ist. Stellen Sie sicher, dass Sie, wenn Sie innerhalb von SortTable () eine Fehlerbedingung erreichen, immer noch den Funktionsaufruf "Nicht mehr besetzt" drücken.


0
2018-03-12 20:43