Quando non dovresti usare $ (document) .ready (function() per gestori di eventi?

Question

Sono nuovo di jquery e javascript e volevo solo sapere, perché non vorresti usare la funzione .ready() per tutti i tuoi eventi i gestori?

non Potrebbe esserci potenziali problemi se un utente invia in ingresso ad un evento del mouse o di un evento di tastiera prima l'intera pagina è stata resa?

Answer 1

Questo non dovrebbe mai essere il caso, il documento jQuery pronto si attiva quando il DOM è stato caricato. Non aspetta la pagina completa (immagini incluse e simili) da caricare. Sarebbe estremamente raro che un utente sia in grado di reagire in tempo per tentare di attivare qualcosa prima che il codice venga eseguito. Leggi questo: http://api.jquery.com/ready/

In particolare, il primo comma:

Mentre JavaScript fornisce l'evento carico per l'esecuzione di codice quando una pagina è reso, questo evento non viene attivato fino a quando tutte le attività come immagini hanno stato completamente ricevuto. Nella maggior parte dei casi, lo script può essere eseguito non appena la gerarchia DOM è stata completata a . Il gestore passato a .ready() è garantito per essere eseguito dopo che il DOM è pronto, quindi questo è in genere il posto migliore per allegare tutti gli altri gestori di eventi ed eseguire altro codice jQuery.

Quindi usare $ (document) .ready (function() {}) o l'equivalente $ (function() {}) è sempre una buona pratica.

MODIFICA: per garantire che l'utente non abbia mai problemi, assicurati che gli script siano tutti ospitati insieme al tuo sito. Ad esempio, jQuery ha l'opzione di usare un CDN. I CDN sono belli, ma se per qualsiasi motivo l'utente può accedere al tuo sito ma non al CDN, potrebbe lasciare la tua pagina in uno stato inutile.

Answer 2

credo che in realtà dovrebbe utilizzare il gestore $(document).ready(). il motivo essendo è, se il tuo HTML o DOM non è ancora stato completamente caricato, quando si associano eventi a elementi diversi, potrebbero non riuscire in virtù del fatto di non essere stati ancora nella pagina.

Non sono sicuro di chi o cosa ti ha detto di non mettere i gestori di eventi nella funzione ready, ma direi che è una pratica abbastanza comune.

Answer 3

ecco perché è consigliabile avvolgere l'intero codice all'interno della funzione .ready().

$(document).ready(function(){ 
    //all event handlers here 
}); 

non Potrebbe esserci potenziali problemi se un utente invia in ingresso ad un evento del mouse o un evento di tastiera prima che l'intera pagina è stata resa?

Il problema non è prima che l'intera pagina sia stata resa o meno. Il problema è quando jQuery non è ancora stato caricato, e quindi un utente prova a fare clic su qualcosa che viene gestito tramite il gestore di eventi jQuery. Quindi, per rispondere alla tua domanda; sì, potrebbe esserci un potenziale problema lì.

Answer 4

Ci sono circostanze in cui non si desidera o non si possono allegare i gestori di eventi pronti perché si desidera abilitare un evento solo dopo qualche altro evento o perché il contenuto e altre informazioni vengono caricati tramite ajax. Per la maggior parte la funzione ready è il posto giusto.

Answer 5

Non potrebbero esserci potenziali problemi se un utente invia un input a un evento del mouse o un evento di tastiera prima che l'intera pagina sia stata renderizzata? [questo paragrafo] si riferisce a uno script non utilizzando .ready()

In generale, se si desidera fare riferimento ad un elemento da JavaScript l'elemento in questione deve essere già stata analizzata, vale a dire, aggiunto alla Albero DOM. Questo vale sia che tu stia cercando di collegare un gestore di eventi (con o senza jQuery), cambiare le sue impostazioni CSS, o qualsiasi altra cosa.

Il gestore .ready() non aspetta che l'intera pagina sia resi, attende per la pagina di essere "pronto" per la manipolazione JS, nel senso che è stato analizzato e tutto l'albero DOM ha stato costruito A quel punto potrebbe ancora verificarsi il rendering, ad es. Il contenuto effettivo degli elementi dell'immagine potrebbe ancora essere scaricato solo parzialmente.

Tuttavia, è possibile iniziare a manipolare gli elementi da JavaScript prima (o senza) la .ready() il tempo che farlo in un blocco di script che è incluso dopo l'elemento (s) in questione nella pagina fonte, poiché il browser esegue l'analisi dall'alto verso il basso dalla sorgente html. Un esempio:

<input type="text" id="input1"> 
<script> 
    // following will work, because "input1" already exists 
    $("#input1").change(function() { /* do something */ }); 

    // following will NOT work, because "input2" has not been parsed yet 
    $("#input2").change(function() { /* do something */ }); 
</script> 
<input type="text" id="input2"> 

Quindi, se per qualche motivo avete qualche pezzo critico di funzionalità che si sente assolutamente necessario impostare prima.ready() si può fare qualcosa di simile a quanto sopra.

Si noti inoltre che non è necessario la funzione .ready() affatto se si include lo script sul fondo del corpo, perché (come con .ready()) a quel punto saranno stati analizzati tutti gli elementi.

Dove si do è necessario .ready() è per codice in un file JS esterno se non si è sicuri di dove nella pagina verrà incluso il file. Se è incluso nella sezione <head>, verrà eseguito prima che il resto del documento venga analizzato, quindi è necessario utilizzare .ready().