javascript settimeout

| | | | | |

setTimeout () en setInterval () zijn JavaScript-synchronisatiegebeurtenissen. De JavaScript-methode setTimeout () voert een functie uit na een periode van milliseconden. JavaScript setInterval () voert een continue functie uit nadat een bepaalde periode van milliseconden is verstreken.

JavaScript wordt regel voor regel uitgevoerd. Zodra een regel is uitgevoerd, begint de volgende regel. Voor de meeste sites is deze structuur logisch - de code moet in volgorde worden uitgevoerd. Wat als ik een pauze tussen bewerkingen wil introduceren?

Hier komen de methoden setTimeout en setInterval van pas. setTimeout roept een functie aan na een ingestelde time-out. setInterval roept een continue functie aan met een gespecificeerde vertraging.

In deze handleiding gaan we praten over wat setTimeout en setInterval< /em> zijn. We zullen aan de hand van enkele voorbeelden laten zien hoe ze werken, zodat u deze methoden kunt gaan gebruiken. Laten we beginnen!

Wat is JavaScript setTimeout?

JavaScript setTimeout () roept een methode aan nadat een bepaalde periode van milliseconden is verstreken. De methode wordt maar één keer aangeroepen. Met de methode setTimeout () kun je vertragingen in je code introduceren.

Laten we eens kijken naar de syntaxis van deze methode:.

De twee parameters die door setTimeout worden geaccepteerd zijn:

  • function :. de functie die u wilt uitvoeren nadat een bepaalde tijd is verstreken
  • uur : De hoeveelheid tijd die uw programma moet wachten voordat een functie wordt uitgevoerd.

Start een JavaScript-timer setTimeout

Laten we een timer maken die "Python.Engineering!" naar de console door middel van een pijlfunctie :

deze timer heeft twee argumenten. Het eerste argument is de JavaScript-functie die we in onze widget willen uitvoeren. Het tweede argument is de tijdsduur in milliseconden die we willen besteden voordat de code in onze functie wordt uitgevoerd.

Na twee seconden te hebben gewacht, drukt onze code "Python.Engineering!" op de JavaScript-console.

De functie die u wilt aanroepen, mag niet worden gedefinieerd in de functie setTimeout. We kunnen onze code ontbinden om het leesbaarder te maken:

De functie die voorheen een argument was, is nu in zijn functie genaamd printCareerKarma. We verwijzen naar deze functie in de setTimeout methode. Deze code is gemakkelijker te lezen dan ons originele voorbeeld

Hoe een ingestelde Timeout-timer annuleren

U kunt een timer annuleren met de clearTimeout ()-methode. Dit stopt de uitvoering van een timer en de code in een timer wordt niet uitgevoerd. Overweeg de volgende code:

Deze code wordt niet afgedrukt naar de console. Dit komt omdat we onze timer wissen met clearTimeout voordat de timer-tag SetTimer de kans krijgt om te werken.

Wat is ? Is JavaScript setInterval

De JavaScript-methode setInterval () roept herhaaldelijk een functie aan. Er wordt een gespecificeerde vertraging gedefinieerd tussen elke

SETIN-functieaanroep. Terval () gebruikt een syntaxis vergelijkbaar met setTimeout ():

U moet twee parameters specificeren om setInterval te gebruiken:

  • function:. de functie die zal worden uitgevoerd
  • time: de tijd tussen elke aanroep van de functie die je hebt opgegeven

Start een JavaScript-script timer setInterval

Terwijl setTimeout een functie slechts één keer uitvoert, blijft setInterval een functie opnieuw uitvoeren. Het gebruikt dezelfde syntaxis als de methode setTimeout.

Laten we een functie maken die de inhoud van een salontafel op de console:

Deze code voert herhaaldelijk de functie iterateOverArray uit. Er zit een vertraging van één seconde (1000 milliseconden) tussen elke aanroep van deze functie.

Het probleem met deze code is dat hij blijft werken, zelfs nadat elk item in onze lijst is herhaald. Wanneer alle items in onze lijst naar de console zijn afgedrukt, blijft de functie "undefined" setInterval werken

De waarden ‚Äã‚Äãworden voor onbepaalde tijd afgedrukt. Omdat het zich herhaalt totdat wordt aangetoond dat het stopt. We lossen dit probleem op.

Een setInterval timer annuleren

De clearInterval methode stopt de uitvoering van een setInterval methode plus .

Annuleer onze timer zodra alle menukoffies op de console zijn afgedrukt. Laten we om te beginnen eens uitrekenen hoeveel artikelen er op onze koffielijst staan. Hierdoor kunnen we bepalen wanneer we onze timer moeten annuleren

Vervolgens zullen we een functie toevoegen aan het einde van onze code. Deze functie stopt onze setInterval-methode nadat al onze koffies naar de console zijn afgedrukt:

Vervolgens gaan we een functie toevoegen aan het einde van onze code. Deze functie stopt onze setInterval-methode nadat al onze koffies naar de console zijn afgedrukt:

We hebben onze methode setInterval () toegewezen aan zijn variabele met de naam printCoffees. Daarom hebben we de setTimeout () methode gedeclareerd die het tijdsinterval van printCoffees annuleert. Deze methode wordt uitgevoerd nadat elke koffie op onze lijst is herhaald.

De Let berekent hoeveel seconden setTimeout ()-methode moet wachten door het aantal af te drukken koffies te vermenigvuldigen door 1001. Vier koffies zijn opgeslagen in onze lijst. Oven vermenigvuldigd met 1000 is 4000, dat is vier seconden.

We hebben het getal 1001 gekozen zodat onze timer stopt nadat het laatste element in de array op de console is afgedrukt. Als we het getal 4000 kiezen, stopt onze printCoffees-methode voordat het laatste item in ons "café" wordt afgedrukt. Tabel bij de console

Laten we onze code uitvoeren:

Onze code stopt nadat alle items in onze lijst naar de console zijn afgedrukt. Het blijft niet voor onbepaalde tijd werken. We hebben inderdaad de methode clearInterval () gebruikt om de methode setInterval ()

setInterval: te stoppen. Een visueel voorbeeld

Laten we wat HTML gebruiken om te laten zien hoe de functie setInterval werkt. We gaan een eenvoudige website maken met daarop onze koffielijst. Deze koffies worden één voor één aan de site toegevoegd. We beginnen met het maken van een eenvoudige front-end voor het project in een bestand met de naam index.html:

Onze interface ziet er als volgt uit:

 6okXMdjRqVaKAyir5bEYOj8C94vmv NLTTYy4tw3 JLK O2H3r QXrM Blze886bBFFOzVth2mVnmq9E9IKo AmRYMoPdoGhToy4K0rFANOFnqAHmeyn74JellbuBam1m910vvtc

tot op dit moment is er niet veel te want we moeten wat javascript schrijven om onze koffie te laten verschijnen.

we zijn op de webpagina.

start ons javascript bij het selecteren van onze lijst Open een oproepbestand strip van scripts.js plak deze code : ..

Deze code selecteert ons artikel uit de lijst U kunt meer weten. op getElementById in onze tutorial over JavaScript getElementById . Dus we gaan onze code vanaf het begin gebruiken, met enkele aanpassingen, om de cafés op de webpagina weer te geven:

iterateOverArray functie, hebben we nieuwe code toegevoegd. We gebruikten eerst createElement () om een nieuw li element te maken. Vervolgens stellen we de inhoud van dit li-element in op dezelfde naam als de naam van een café in onze lijst.

Onze code voegt het element li toe voor ul op onze lijst. Dit proces herhaalt zich totdat alles van onze koffielijst is toegevoegd aan de webpagina, zoals in ons laatste voorbeeld.

Laten we onze code uitvoeren en kijken wat er gebeurt. Na vier seconden, ons rendement van de code:

BKdNM1booSj51VOG3Edr4fT1Z53SrHX6tT7RcsPA7tSJ5bGi1IPvOqHEDNNThuDhexK3vOSZ9 JdXWlcfQ0WXyaX2y4lCBr957jjAEkenvoWF27UEWPNpgpExDnX6PwV0wvAO 5U

Er is een tweede interval tussen elk element dat aan de webpagina wordt toegevoegd.

Conclusie (en uitdaging)

setTimeout en setInterval zijn JavaScript-synchronisatiegebeurtenissen. De methode setTimeout voert een functie na een vertraging uit. setInterval roept een functie herhaaldelijk aan met een vertraging tussen elke aanroep.

Probeer je je vaardigheden te verbeteren met deze methoden? Probeer een visuele interface te maken met HTML en JavaScript voor een geheugenspel.

Het spel zou een reeks van vijf woorden moeten tonen die de gebruiker moet onthouden. Nadat de woorden zijn weergegeven, moet de gebruiker vragen welke hij zich herinnert. Als je meer hulp zoekt bij het leren van JavaScript, lees dan onze gids voor het beste JavaScript tutorials voor beginners .

javascript settimeout __del__: Questions

javascript settimeout JavaScript: Questions

Shop

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Best laptop for Zoom

$499

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method