Mester JavaScript setTimeout(): Få full kontroll over tid og animasjoner!

Utforsk bruken av setTimeout() i JavaScript for dynamiske webapplikasjoner

For en webutvikler er respons og interaktivitet viktige faktorer for å skape en god brukeropplevelse. For å forbedre hvordan brukerne opplever din applikasjon, er det nødvendig å implementere dynamisk funksjonalitet og kontrollere når spesifikke deler av koden utføres.

Metoden setTimeout() er et verdifullt verktøy som muliggjør planlegging av kodeutførelse, orkestrering av animasjoner, etablering av tidtakere og håndtering av asynkrone operasjoner.

Derfor er det viktig å forstå syntaksen og bruken av setTimeout(). Denne artikkelen gir deg den nødvendige kunnskapen for å utnytte setTimeout() optimalt i dine prosjekter.

JavaScript sin setTimeout-funksjon

setTimeout() er en global metode knyttet til vindusobjektet som brukes for å utføre en funksjon eller et kodestykke etter en spesifikk tidsperiode. Hvis du for eksempel ønsker å kjøre en funksjon etter fire sekunder, er setTimeout() den rette metoden.

Når setTimeout() brukes, setter den en tidsmåler som teller ned til den angitte tiden, og deretter utfører den funksjonen eller koden du har lagt inn.

Som en global metode, finnes setTimeout() i det globale objektet, noe som gjør den tilgjengelig uten behov for importering. Det globale objektet, som tilbys av Document Object Model (DOM) i nettleseren, refereres til via egenskapen window.

Dermed kan vi bruke window.setTimeout() eller bare setTimeout(), da det globale objektet window er underforstått. Det er ingen funksjonell forskjell mellom window.setTimeout() og setTimeout().

Den generelle syntaksen for setTimeout() er:

setTimeout(funksjon, forsinkelse)

• funksjon – Dette er funksjonen som skal utføres etter en bestemt tid.
• forsinkelse – Tiden i millisekunder etter hvilken funksjonen skal kjøres. Ett sekund tilsvarer 1000 millisekunder.

Ved bruk av setTimeout() skal forsinkelsen angis som en numerisk verdi for å unngå uforutsette resultater. Forsinkelsesargumentet er valgfritt; hvis det ikke spesifiseres, er standardverdien 0 og funksjonen utføres umiddelbart.

setTimeout() returnerer en unik identifikator, kjent som en timeoutID, som er et positivt heltall som identifiserer timeren som opprettes når metoden kalles.

Det er også viktig å merke seg at setTimeout() er asynkron. Timeren stopper ikke utførelsen av andre funksjoner i anropsstakken.

Hvordan bruke setTimeout()

La oss se på eksempler som illustrerer hvordan du bruker setTimeout()-metoden:

    // setTimeout() med en funksjonsdeklarasjon
    setTimeout(function () {
      console.log("Hallo verden etter 3 sekunder");
    }, 3000);

    // setTimeout() med en arrow-funksjon
    setTimeout(() => {
      console.log("Hallo verden i en arrow-funksjon - 1 sekund");
    }, 1000);
  

Utdata:

    Hallo verden i en arrow-funksjon - 1 sekund
    Hallo verden etter 3 sekunder
  

I utdataet ovenfor logges den andre setTimeout()-meldingen først fordi den har en kortere forsinkelse på 1 sekund, sammenlignet med den første som har 3 sekunders forsinkelse. Som tidligere nevnt er setTimeout() asynkron. Når den første setTimeout() med en forsinkelse på 3 sekunder kalles, startes en 3-sekunders timer, men det stopper ikke utførelsen av annen kode i programmet.

Mens metoden teller ned fra 3, utføres resten av koden i anropsstakken. I dette eksemplet er neste kodebit den andre setTimeout() med 1 sekunds forsinkelse. Dette er grunnen til at den kjøres før den første setTimeout(), på grunn av den kortere forsinkelsen.

Når du bruker setTimeout(), trenger du ikke skrive funksjonen direkte i metoden.

    // Funksjonsdeklarasjon
    function greet() {
      console.log("Hei der!");
    }

    // Lagre en funksjon i en variabel - funksjonsuttrykk
    const speak = function () {
      console.log("Hvordan går det?");
    };

    // Bruk av en arrow-funksjon
    const signOff = () => {
      console.log("Med vennlig hilsen: tipsbilk.net:)");
    };

    // Send inn en funksjonsreferanse til setTimeout()
    setTimeout(greet, 1000);
    setTimeout(speak, 2000);
    setTimeout(signOff, 3000);
  

Utdata:

    Hei der!
    Hvordan går det?
    Med vennlig hilsen: tipsbilk.net:)
  

Når vi definerer en metode et annet sted og sender den til setTimeout(), sendes en referanse til funksjonen som skal utføres etter en gitt tid.

setTimeout() med ekstra parametre

setTimeout() har en alternativ syntaks som lar deg sende ekstra parametre til metoden. Disse parameterne vil bli brukt i funksjonen som utføres etter forsinkelsen.

Syntaksen er som følger:

setTimeout(funksjonRef, forsinkelse, param1, param2, /* ..., */ paramN)

Du kan sende inn et valgfritt antall parametere, avhengig av antall argumenter som kreves av den refererte funksjonen.

Se på følgende funksjon:

    function greet (navn, melding) {
      console.log(`Hallo ${navn}, ${melding}`);
    }
  

Hvis du ønsker å utføre funksjonen ovenfor etter en bestemt tid ved hjelp av setTimeout(), kan du gjøre det slik:

    // setTimeOut() med ekstra parametre
    function greet (navn, melding) {
      console.log(`Hallo ${navn}, ${melding}`);
    }
    setTimeout(greet, 2000, "John", "god koding!");
  

Utdata:

Hallo John, god koding!

Husk at hvis en funksjon defineres et annet sted og deretter sendes inn i setTimeout(), sendes kun en referanse til funksjonen. I eksemplet ovenfor sendes referansen greet, og ikke greet() som vil kalle funksjonen. Vi vil at setTimeout() skal kalle funksjonen med dens referanse.

Dette er grunnen til at vi ikke kan sende inn ekstraparametere direkte, slik som under:

    // Dette resulterer i en ERR_INVALID_ARG_TYPE feil
    setTimeout(greet("John", "god koding!"), 2000);
  

I koden ovenfor utføres greet-funksjonen umiddelbart, uten å vente i 2 sekunder. En feil vil deretter bli kastet. Resultatet av kodeutførelsen vises under:

Avbryte setTimeout()

Vi kan forhindre utførelse av en funksjon som er planlagt med setTimeout() ved hjelp av metoden clearTimeout(). Dette kan være nødvendig dersom en funksjon er planlagt å kjøre etter en viss tid, men vi ikke lenger vil at funksjonen skal kjøres når visse betingelser er oppfylt eller endres.

Syntaksen for clearTimeout()-metoden er som følger:

clearTimeout(timeoutID)

clearTimeout() tar et enkelt argument, timeoutID, som er den unike identifikatoren som returneres av setTimeout()-metoden.

Se på eksemplet under:

    function text() {
      console.log("Dette vil ikke bli printet");
    }

    function greet() {
      console.log("Hei etter 5 sekunder");
    }

    // Planlegg at funksjonen text() skal utføres etter 3 sekunder
    const timeOutID = setTimeout(text, 3000);

    // Avbryt text() sin timeout ved bruk av clearTimeout()
    clearTimeout(timeOutID);
    console.log(`${timeOutID} er avbrutt`);

    // Planlegg at funksjonen greet() skal utføres etter 5 sekunder
    setTimeout(greet, 5000);
  

Utdata:

    2 er avbrutt
    Hei etter 5 sekunder
  

Funksjonen text() blir ikke utført, da clearTimeout() brukes til å avbryte timeout, og dermed forhindre utførelsen.

Fordeler med å bruke setTimeout()

Noen av fordelene ved å bruke metoden setTimeout() er:

• Forsinket kodeutførelse – Den primære funksjonen til setTimeout() er å gjøre det mulig for utviklere å forsinke utførelsen av kode. Dette er viktig for å skape animasjoner, administrere tidsbestemte hendelser og kontrollere flyten av asynkron kode. setTimeout() frigjør også hovedtråden for å kjøre annen kode.
• Timerimplementering – setTimeout() gir en enkel metode for å implementere enkle tidtakere i en applikasjon uten å måtte bruke eksterne biblioteker eller komplekse datooperasjoner.
• Throttling og Debouncing – setTimeout() kan brukes til å begrense antall ganger visse funksjoner kalles eller handlinger utføres, spesielt under hendelser som rulling eller skriving. Ved debouncing venter applikasjonen en viss tid før den kaller en funksjon. Throttling begrenser antall funksjonsanrop som gjøres innen en gitt tidsperiode. setTimeout() kan brukes for å oppnå begge disse.
• Forbedring av brukeropplevelsen – setTimeout() lar deg forbedre brukeropplevelsen ved å kontrollere når visse handlinger skjer, for eksempel visning av varsler, meldinger og animasjoner. Dette er nyttig for å unngå overbelastning av informasjon og dermed forbedre brukeropplevelsen.
• Forbedre ytelse – setTimeout() kan brukes til å forbedre ytelsen og den generelle responsen til webapplikasjoner ved å dele opp komplekse problemer i mindre, håndterbare oppgaver. Disse mindre oppgavene kan håndteres i en setTimeout(), slik at andre deler av koden kan fortsette å kjøre og dermed ikke påvirke ytelsen eller responsen til en applikasjon.

Det er tydelig at setTimeout() er et kraftig og nyttig verktøy når du bygger applikasjoner med JavaScript.

Ulemper ved å bruke setTimeout()

Noen av ulempene ved å bruke setTimeout() inkluderer:

• Unøyaktig timing – setTimeout() garanterer ikke nøyaktig tid for når en funksjon kalles eller en operasjon utføres. Dårlig skrevet kode kan føre til situasjoner som påvirker driften av setTimeout(). Når du bruker flere overlappende setTimeout()-kall, kan du ikke alltid være sikker på utførelsesrekkefølgen, spesielt når andre asynkrone operasjoner er involvert.
• Callback Hell – Hvis det er for mange nestede setTimeout()-kall, kan koden bli vanskelig å lese og feilsøke. Det vil også være svært vanskelig å følge flyten av logikk i applikasjonen. Bruk av for mange setTimeout()-kall kan også føre til minneproblemer hvis disse ikke håndteres riktig.

Selv om setTimeout() kan forårsake utfordringer ved bruk, kan du minimere eller unngå ulemper ved å følge beste praksis og god kodingspraksis.

Konklusjon

Metoden setTimeout() kan brukes for å forsinke utførelsen av funksjoner. setTimeout() brukes ofte i forbindelse med animasjoner, utsettelse av lasting av innhold og håndtering av timeout for forespørsler.

Du kan for eksempel bruke setTimeout() for å vise varsler på nettsidene dine. Selv om setTimeout() ikke garanterer nøyaktig utførelsestid for en funksjon, garanterer den at funksjonen utføres etter den angitte forsinkelsen.

Du kan også utforske JavaScript ORM-plattformer for effektiv koding.