JavaScript exekveringsorder

Att utforma din webbsida med JavaScript kräver uppmärksamhet på i vilken ordning din kod visas och om du kapslar in kod i funktioner eller objekt, som alla påverkar ordningen i vilken koden körs. 

Platsen för JavaScript på din webbsida

Eftersom JavaScript på din sida körs baserat på vissa faktorer, låt oss överväga var och hur du lägger till JavaScript till en webbsida. 

Det finns i princip tre platser där vi kan bifoga JavaScript:

• Direkt in på sidan
• Direkt in i sidans kropp
• Från en händelsehandlare / lyssnare

Det gör ingen skillnad om JavaScript finns på själva webbsidan eller i externa filer som är länkade till sidan. Det spelar ingen roll om händelseshanterarna är hårkodade på sidan eller läggs till av JavaScript själv (förutom att de inte kan triggas innan de läggs till).

Kod direkt på sidan

Vad betyder det att säga att JavaScript är direkt i sidans huvud eller kropp? Om koden inte bifogas i en funktion eller ett objekt är den direkt på sidan. I detta fall körs koden i tur och ordning så snart filen som innehåller koden har laddats tillräckligt för att den koden ska nås.

Kod som finns inom en funktion eller ett objekt körs endast när den funktionen eller objektet anropas.

I grund och botten betyder det att alla koder i huvudet och kroppen på din sida som inte finns i en funktion eller objekt kommer att köras när sidan laddas - så snart sidan har laddats tillräckligt för att få åtkomst till den koden.

Den sista biten är viktig och påverkar i vilken ordning du placerar din kod på sidan: varje kod som placeras direkt på sidan som måste interagera med element på sidan måste visas efter elementen på sidan som det är beroende av.

I allmänhet betyder detta att om du använder direkt kod för att interagera med ditt sidinnehåll, bör en sådan kod placeras längst ner på kroppen.

Kod inom funktioner och objekt

En kod inuti funktioner eller objekt körs när den funktionen eller objektet anropas. Om det heter från kod som är direkt i huvudet eller kroppen på sidan, är dess plats i exekveringsordningen i praktiken den punkt där funktionen eller objektet kallas från den direkta koden.

Kod tilldelad evenemangshanterare och lyssnare

Tilldelning av en funktion till en händelseshanterare eller lyssnare resulterar inte i att funktionen körs vid den punkt där den är tilldelad - förutsatt att du faktiskt är tilldela själva funktionen och springer inte funktionen och tilldela det returnerade värdet. (Det är därför du i allmänhet inte ser () i slutet av funktionsnamnet när det tilldelas en händelse eftersom tillägget av parenteserna kör funktionen och tilldelar det returnerade värdet istället för att tilldela själva funktionen.)

Funktioner som är kopplade till händelseshanterare och lyssnare körs när händelsen som de är kopplad till utlöses. De flesta händelser utlöses av besökare som interagerar med din sida. Vissa undantag finns dock, till exempel ladda händelse i själva fönstret, som utlöses när sidan slutar laddas.

Funktioner knutna till händelser på sidelement