Som webutvikler er responsen og interaktiviteten til webapplikasjonen din nøkkelkomponenter i brukeropplevelsen. For å forbedre brukeropplevelsen av applikasjonen din, må du legge til dynamisk atferd og ha kontroll over tiden når visse deler av koden i applikasjonen kjøres.
Metoden setTimeout() er et utmerket verktøy for dette, siden den lar deg planlegge utførelse av kode, orkestrere animasjoner, lage tidtakere og administrere asynkrone operasjoner i applikasjonen din.
Derfor er det viktig å forstå setTimeout() sin syntaks, hvordan du bruker den, og hvordan du kan bruke den i ditt neste prosjekt. Denne artikkelen vil utforske nettopp det og utstyre deg med den rette kunnskapen for å la deg få mest mulig ut av setTimeout()-metoden.
Innholdsfortegnelse
JavaScripts setTimeout-funksjon
setTimeout() er en global metode bundet til vindusobjektet og den brukes til å utføre en funksjon eller et kodestykke etter en viss periode. For eksempel, hvis du har en funksjon du vil kjøre etter fire sekunder, er setTimeout() metoden du vil bruke for å oppnå dette.
Når den brukes, setter metoden setTimeout() en tidtaker som teller ned til tiden du spesifiserer går, og utfører deretter funksjonen eller koden du har sendt inn i den.
Å være en global metode betyr at setTimeout() finnes i det globale objektet og dermed er tilgjengelig overalt uten behov for import. Det globale objektet, som leveres av Document Object Model (DOM) i nettleseren, refereres til av egenskapsnavnvinduet.
Derfor kan vi bruke window.setTimeout() eller ganske enkelt setTimeout() som det globale objektvinduet vil bli underforstått. window.setTimeout() og setTimeout() har ingen forskjell.
Den generelle syntaksen for setTimeout() er som følger:
setTimeout(function, delay)
- funksjon – dette er funksjonen som skal utføres etter en gitt tid.
- forsinkelse – tid i millisekunder etter hvilken funksjonen som er bestått, skal utføres. 1 sekund tilsvarer 1000 millisekunder.
Når du bruker setTimeout() skal forsinkelsen du angir være en numerisk verdi for å unngå uønskede utfall. Forsinkelsesargumentet er valgfritt. Hvis det ikke er spesifisert, er det standard 0 og funksjonen som sendes, utføres umiddelbart.
setTimeout() returnerer en unik identifikator kjent som en timeoutID, som er et positivt heltall som unikt identifiserer tidtakeren som opprettes når en setTimeout()-metode kalles.
Det er også viktig å merke seg at setTimeout() er asynkron. Tidtakeren stopper ikke utførelsen av andre funksjoner i anropsstakken.
Slik bruker du setTimeout()
La oss se på eksempler som viser hvordan du bruker setTimeout()-metoden:
// setTimeout() with a function declaration
setTimeout(function () {
console.log("Hello World after 3 seconds");
}, 3000)
// setTimeout() with an arrow function
setTimeout(() => {
console.log("Hello World in an arrow function - 1 second")
}, 1000)
Produksjon:
Hello World in an arrow function - 1 second Hello World after 3 seconds
I utgangen ovenfor logger den andre setTimeout() ut utgangen først fordi den har en kortere forsinkelse på 1 sekund, sammenlignet med den første som har en forsinkelse på 3 sekunder. Som nevnt tidligere, er setTimeout() asynkron. Når den første setTimeout() med en forsinkelse på 3 sekunder kalles, startes en 3-sekunders timer, men den stopper ikke kjøringen av den andre koden i programmet.
Når metoden teller ned fra 3, blir resten av koden i anropsstakken utført. I dette eksemplet er neste kodebit den andre setTimeout() med en forsinkelse på 1 sekund. Siden den har en mye kortere forsinkelse, er dette grunnen til at koden kjøres før den første setTimeout()
Når du bruker setTimeout(), trenger du ikke skrive funksjonen direkte i setTimeout()-metoden.
// function declaration
function greet() {
console.log("Hello there!")
}
// store a function in a variable - function expression
const speak = function () {
console.log("How are you doing?")
}
// using an arrow function
const signOff = () => {
console.log("Yours Sincerely: tipsbilk.net:)")
}
// pass in a function reference to setTimeout()
setTimeout(greet, 1000)
setTimeout(speak, 2000)
setTimeout(signOff, 3000)
Produksjon:
Hello there! How are you doing? Yours Sincerely: tipsbilk.net:)
Når vi definerer en metode et annet sted, så sender den setTimeout(), det vi sender inn i setTimeout()-metoden er en referanse til funksjonen vi ønsker å utføre etter en gitt tid.
setTimeout() med tilleggsparametere
setTimeout() har en alternativ syntaks som lar deg sende inn flere parametere til setTimeout()-metoden. Disse parameterne skal brukes i funksjonen du utfører etter forsinkelsen.
Syntaksen er som følger:
setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)
Du kan sende inn et hvilket som helst gitt antall tilleggsparametere avhengig av antall argumenter som trengs av funksjonen du refererer til.
Tenk på funksjonen nedenfor:
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}
Hvis du vil utføre funksjonen ovenfor etter en viss tid ved å bruke setTimeout(), kan du gjøre det som vist nedenfor:
// setTimeOut() with additional parameters
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}
setTimeout(greet, 2000, "John", "happy coding!");
Produksjon:
Hello John, happy coding!
Husk at hvis vi definerer en funksjon et annet sted og deretter sender den inn i setTimeout(), er det vi sender inn ganske enkelt en referanse til funksjonen. I eksemplet ovenfor sender vi inn referansen greet og ikke greet(), som kaller funksjonen. Vi vil at setTimeout() skal være den som kaller funksjonen ved å bruke dens referanse.
Dette er grunnen til at vi ikke kan sende inn tilleggsparametrene direkte, som vist nedenfor:
// This results in an ERR_INVALID_ARG_TYPE error
setTimeout(greet("John", "happy coding!"), 2000);
I koden ovenfor utføres velkomstfunksjonen umiddelbart uten å vente i 2 sekunder. En feil blir da kastet. Resultatet av å utføre koden vises nedenfor:
Kansellerer setTimeout()
Vi kan forhindre kjøring av en funksjon planlagt ved hjelp av setTimeout() ved å bruke metoden clearTimeout(). Noe slikt kan være nødvendig hvis vi har satt en funksjon til å kjøre etter en viss periode, men vi vil ikke at funksjonen skal kjøre etter at visse betingelser er oppfylt eller betingelsene endres.
Syntaksen for clearTimeout()-metoden er som vist nedenfor:
clearTimeout(timeoutID)
clearTimeout() tar et enkelt argument, timeoutID, som er den unike identifikatoren som returneres av setTimeout()-metoden.
Tenk på eksemplet nedenfor:
function text() {
console.log("This is not going to be printed")
}
function greet() {
console.log("Hello after 5 seconds")
}
// Schedule the function text() to be executed after 3 seconds
const timeOutID = setTimeout(text, 3000);
// cancelt text() timeout time using clearTimeout()
clearTimeout(timeOutID)
console.log(`${timeOutID} cleared out`)
// Schedule the function greet() to be executed after 5 seconds
setTimeout(greet, 5000)
Produksjon:
2 cleared out Hello after 5 seconds
Funksjonen text() utføres ikke ettersom clearTimeout() brukes til å avbryte tidsavbruddet, og forhindrer dermed kjøringen.
Fordeler med å bruke setTimeout()
Noen av fordelene ved å bruke metoden setTimeout() inkluderer:
- Delaying Code Execution – den primære funksjonen til setTimeout() er å gjøre det mulig for utviklere å forsinke utføringen av kode. Dette er en avgjørende funksjon når du lager animasjoner, administrerer tidsbestemte hendelser og også kontrollerer flyten av asynkron kode. setTimeout() frigjør også hovedtråden for å kjøre annen kode.
- Timerimplementering – setTimeout() gir en enkel måte å implementere enkle tidtakere i en applikasjon uten å måtte bruke eksterne biblioteker eller utføre komplekse datooperasjoner.
- Throttling and Debouncing – setTimeout() kan brukes til å begrense antall ganger visse funksjoner kalles eller handlinger utføres, spesielt under hendelser som rulling eller skriving. Med debouncing venter applikasjonen en viss tid før den anroper en funksjon. Throttling begrenser antall funksjonsanrop som gjøres innenfor en gitt tidsperiode. setTimeout() kan brukes til å oppnå begge disse
- Forbedre brukeropplevelsen – setTimeout() lar deg forbedre brukeropplevelsen av applikasjonen din ved å kontrollere når visse handlinger skjer, for eksempel når varsler, varsler, popup-meldinger og animasjoner vises. Dette er nyttig for å forhindre overbelastning av informasjon på brukere, og dermed forbedre brukeropplevelsen.
- Forbedre nettytelse – setTimeout() kan brukes til å forbedre ytelsen og den generelle responsen til nettapplikasjoner ved å bryte ned komplekse problemer i mindre, mye enklere problemer. Disse mindre problemene kan håndteres i en setTimeout(), slik at andre deler av koden kan fortsette kjøringen, og dermed ikke påvirke ytelsen eller responsen til en applikasjon.
Det er klart at setTimeout() er både kraftig og veldig nyttig når du bygger applikasjoner med JavaScript.
Ulemper ved å bruke setTimeout()
Noen av ulempene ved å bruke setTimeout() inkluderer:
- Unøyaktig timing – setTimeout() kan ikke garantere den nøyaktige tiden en funksjon vil bli kalt eller en operasjon utført. Noen ganger fører annen dårlig skrevet kode til raseforhold som vil påvirke driften av setTimeout(). Når du bruker flere overlappende setTimeout()-er, kan du ikke alltid være sikker på utførelsesrekkefølgen, spesielt hvis andre asynkrone operasjoner er involvert
- Callback Hell – Hvis du har for mange nestede setTimeout()-kall, kan koden din bli vanskelig å lese og feilsøke. Det vil også være svært vanskelig å følge strømmen av logikk i søknaden din. Bruk av for mange setTimeout() kan også føre til minneproblemer i applikasjonen hvis setTimeout()-kallene ikke håndteres riktig.
Mens setTimeout() kan forhindre noen utfordringer når du bruker den, ved å holde deg til beste praksis og god kodingspraksis, kan du minimere eller helt unngå ulempene i applikasjonen din.
Konklusjon
Metoden setTimeout() kan brukes til å forsinke utførelsen av funksjoner. setTimeout brukes ofte til animasjoner, forsinket lasting av innhold og håndtering av tidsavbrudd for forespørsler.
Du kan for eksempel bruke setTimeout() for å vise varsler på nettsidene dine. Mens setTimeout() ikke garanterer den nøyaktige tiden en funksjon utføres, garanterer den at den utføres etter en angitt forsinkelse.
Du kan også utforske JavaScript ORM-plattformer for effektiv koding.