Cambia il tipo di cursore per un documento HTML da JavaScript

Question

Diciamo che ho un metodo javascript che impiega un po 'troppo a finire per andare avanti senza alcun feedback degli utenti. Nel mio caso sta ordinando le righe in un elemento di tabella (tutte nel DOM; impiega troppo tempo se ci sono lotti di righe), ma potrebbe fare qualsiasi cosa. Voglio mostrare il "progresso" cursore mentre corre. Ecco quello che ho attualmente, ma ho provato anche molte altre cose:

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

Sfortunatamente, non succede nulla. MyLongRunningMethod () fa le cose correttamente, ma il cursore non cambia mai. Il mio pensiero è che il browser debba attendere il ritorno del metodo per poter gestire il messaggio di cambio cursore generato dall'ambiente di finestre, ma potrebbe essere molto lontano e anche se è vero non so come risolverlo.

Altre idee?

---

[modifica]: ho deciso che tutto il retroscena che avevo inventato non era davvero necessario. Se vuoi davvero leggerlo controlla la cronologia delle revisioni.

---

Risultati finali

Ho finito per usare la soluzione di RoBorg. Non confonde il codice come pensavo inizialmente, perché posso mantenere la funzione dichiarata proprio lì, è proprio come aggiungere un blocco di ambito in linea.

È interessante notare che su Firefox ho scoperto che questo significa che non ho bisogno di cambiare il cursore. Ho scoperto che dopo aver aggiunto la chiamata setTimeout a volte vedevo apparire un cursore di attesa prima che fosse impostato il cursore di avanzamento, quindi ho commentato il mio codice cursore. Si scopre che qualcosa nell'uso di setTimeout per estrarlo dal gestore dell'evento click stesso consente a FireFox di capire da solo che il cursore dovrebbe cambiare. Sfortunatamente, IE non è così intelligente, quindi ho reinserito il codice cursore.

Questo dà credito alla mia convinzione che un cambio di cursore sia l'azione appropriata qui & # 8212; data l'opportunità è comunque ciò che farà il browser. Non voglio davvero aggiungere e rimuovere nuovi elementi (come un'immagine occupata di qualche tipo) nel DOM per una pagina di cui conosco molto poco. Lo script dovrebbe corrispondere indipendentemente dal design visivo utilizzato dalla pagina.

Infine, Chrome rende il tutto irrilevante. Utilizzando gli stessi dati, Chrome esegue in meno di 5 secondi il completamento di IE e Firefox da 10 a 15 secondi. Quindi il loro motore javascript è davvero più veloce. Non vedo l'ora che arrivi il motore di Firefox 3.1. Sfortunatamente le persone qui usano ancora IE6.

Answer 1

L'uso di un timer è fuori discussione?

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

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

Answer 2

Nel web, cambiare il cursore del mouse non è convenzionale e non è piacevole.

È molto meglio (e più facile) usare alcune piccole animazioni sulla pagina stessa, controlla http: //www.ajaxload.info/ per tali immagini (è un generatore online).

Answer 3

Prova a rimuovere document.body.style.cursor = " auto " e inserendolo in una funzione chiamata al completamento della funzione SortTable. In questo modo manterrai il cursore occupato fino al completamento della funzione. Assicurati che se raggiungi una condizione di errore in SortTable (), premi ancora " Non più occupato " chiamata di funzione.