Javascript setTimeout ()

Indholdsfortegnelse

I denne vejledning lærer du JavaScript-metoden setTimeout () ved hjælp af eksempler.

Den setTimeout()metode udfører en blok af kode efter den angivne tid. Metoden udfører kun koden én gang.

Den almindeligt anvendte syntaks for JavaScript setTimeout er:

 setTimeout(function, milliseconds);

Dens parametre er:

  • funktion - en funktion, der indeholder en blok kode
  • millisekunder - det tidspunkt, hvorefter funktionen udføres

Den setTimeout()metode returnerer en intervalID , hvilket er et positivt heltal.

Eksempel 1: Vis en tekst en gang efter 3 sekunder

 // program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) setTimeout(greet, 3000); console.log('This message is shown first');

Produktion

Denne meddelelse vises først  Hej verden

I ovenstående program setTimeout()kalder metoden greet()funktionen efter 3000 millisekunder ( 3 sekunder).

Derfor viser programmet kun teksten Hello world en gang efter 3 sekunder.

Bemærk : setTimeout()Metoden er nyttig, når du vil udføre en blok på en gang efter et stykke tid. For eksempel at vise en besked til en bruger efter det angivne tidspunkt.

Den setTimeout()metode returnerer intervallet id. For eksempel,

 // program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) let intervalId = setTimeout(greet, 3000); console.log('Id: ' + intervalId); 

Produktion

 Id: 3 Hej verden

Eksempel 2: Vis tid hvert 3. sekund

 // program to display time every 3 seconds function showTime() ( // return new date and time let dateTime= new Date(); // returns the current local time let time = dateTime.toLocaleTimeString(); console.log(time) // display the time after 3 seconds setTimeout(showTime, 3000); ) // calling the function showTime();

Produktion

 17:45:39 17:45:43 17:45:47 17:45:50… 

Ovenstående program viser tiden hvert 3. sekund.

Den setTimeout()metode kalder funktionen kun én gang efter tidsintervallet (her 3 sekunder).

I ovennævnte program viser programmet imidlertid tiden hvert 3. sekund , da funktionen kalder på sig selv .

Dette program kører på ubestemt tid (indtil hukommelsen løber tør).

Bemærk : Hvis du har brug for at udføre en funktion flere gange, er det bedre at bruge setInterval()metoden.

JavaScript clearTimeout ()

Som du har set i eksemplet ovenfor, udfører programmet en kodeblok efter det angivne tidsinterval. Hvis du vil stoppe dette funktionsopkald, kan du bruge clearTimeout()metoden.

Syntaksen for clearTimeout()metoden er:

 clearTimeout(intervalID);

Her intervalIDer setTimeout()metodens returværdi .

Eksempel 3: Brug clearTimeout () -metoden

 // program to stop the setTimeout() method let count = 0; // function creation function increaseCount()( // increasing the count by 1 count += 1; console.log(count) ) let id = setTimeout(increaseCount, 3000); // clearTimeout clearTimeout(id); console.log('setTimeout is stopped.');

Produktion

 setTimeout er stoppet.

I ovenstående program setTimeout()bruges metoden til at øge værdien af ​​tællingen efter 3 sekunder. clearTimeout()Metoden stopper dog metodens funktionsopkald setTimeout(). Derfor øges tællingsværdien ikke.

Bemærk : Du bruger generelt clearTimeout()metoden, når du skal annullere setTimeout()metodeopkaldet, før det sker.

Du kan også videregive yderligere argumenter til setTimeout()metoden. Syntaksen er:

 setTimeout(function, milliseconds, parameter1,… .paramenterN);

Når du passerer yderligere parametre til setTimeout()metoden, disse parametre ( parameter1, parameter2vil, osv) overføres til den angivne funktion .

For eksempel,

 // program to display a name function greet(name, lastName) ( console.log('Hello' + ' ' + name + ' ' + lastName); ) // passing argument to setTimeout setTimeout(greet, 1000, 'John', 'Doe');

Produktion

 Hej John Doe

I ovenstående program, to parametre Johnog Doeer videregivet til setTimeout()metoden. Disse to parametre er de argumenter, der overføres til den funktion (her, greet()funktion), der er defineret inde i setTimeout()metoden.

Anbefalet læsning: JavaScript async () og afventer ()

Interessante artikler...