Hová jutunk?

Időzités setTimeout() és setInterval()

Témakörök: setTimeout() és setInterval().


1. window.setTimeout() vagy setTimeout(), window.setInterval() vagy setInterval().

2. A setTimeout() csak egyszer hajtódik végre.

3. A setInterval() meghatározott időközönként meghív, egy függvényt.

4. Egyszerű indítás leállítás, tetszőleges időpontban.

5. Biztonságos indítás leállítás, tetszőleges időpontban.

6. Tetszőleges HTML elemnél, időzítés.

7. Kiválasztott elem, stílusának megváltoztatása időzítéssel.

8. Egér pozíciójának kiíratása.

Egér poziciója,
böngészőablak
területén:
0
0

Megjegyzés:
A window.setTimeout() és window.setInterval() metódusok, "window" előtag nélkül is, írhatók.
Minegyik időzítő, setTimeout() vagy setInterval() azonnal indul a weboldal betöltődésekor, ha nem helyezünk el egy függvényt, mely tárolja az időzítő meghatározást, és egy button gombot, melyre kattintva meghívjuk a függvényünket.
Az elhelyezett függvényt, JavaScript futtatása közben, általunk meghatározott érték elérésekor program is, meghívhatja.

Definiálás, azaz létrehozás:

var kulcsszóval.         Példa: var  ékezet nélküli azonosítónév = 5;    Létrehozása után, módosítható de nem semlegesíthető.
const kulcsszóval.      Példa: const ékezet nélküli azonosítónév = 5;  Létrehozása után, nem módosítható, de semlegesíthető.
let kulcsszóval.           Példa: let ékezet nélküli azonosítónév;     Érték nélküli változó. Létrehozása után, kap értéket.
Vagy kulcsszó nélkül.  Példa:       ékezet nélküli azonosítónév = 5;      Létrehozása után, módosítható vagy semlegesíthető.



window.setTimeout() vagy csak setTimeout()

Újra indításhoz, frissíteni kell az oldalt.

window.setTimeout (téma, 1000);

Csak, egyszer hajtódik végre.
Több időzített téma, azaz, üzenet is, elhelyezhető, más-más időzítéssel.
Téma helyett függvénynévvel, function is meghívható.

xxxxxxxxx


setTimeout (téma, 1500);

Csak, egyszer hajtódik végre.
Több időzített téma, azaz, üzenet is, elhelyezhető, más-más időzítéssel.
Téma helyett függvénynévvel, function is meghívható.

xxxxxxxxx

<script>
var wstid=document.getElementById("wstime")
    wstid.style.backgroundColor="yellow";
  window.setTimeout("wstid.innerHTML=('<p>window.setTimeout üzenete! Eltelt idő = 1 másodperc !</p>')",1000);
	
var stid=document.getElementById("stime")
    stid.style.backgroundColor="yellow";
  setTimeout("stid.innerHTML=('<p>setTimeout üzenete!<br> Eltelt idő = 1.5 másodperc!</p>' )",1500);
</script>

window.setInterval() vagy csak setInterval()

Újra indításhoz, frissíteni kell az oldalt.

window.setInterval (téma, 1000);

Folyamatosan ismétlődik a megadott időzítési értéknek megfelelően.
Leállítani, a clearTimeout() meghívásával,
vagy oldalról történő kilépéssel lehetséges.
Leállítás után újraindítani, oldal frissítésével tudjuk.

xxxxxxxxx


setInterval (téma, 1000);

Folyamatosan ismétlődik a megadott időzítési értéknek megfelelően.
Leállítani, a clearTimeout() meghívásával,
vagy oldalról történő kilépéssel lehetséges.
Leállítás után újraindítani, oldal frissítésével tudjuk.

xxxxxxxxx

<body>

<p id="wdemo">xxxxxxxxx</p> <button onclick="wStop()">Stop</button>
<p id="sdemo">xxxxxxxxx</p> <button onclick="sStop()">Stop</button>

<script>
const WInterval = window.setInterval(WTimer, 1000);

function WTimer() { const wdate = new Date();
  document.getElementById("wdemo").innerHTML = wdate.toLocaleTimeString();
}

function wStop() { clearInterval(WInterval); }

// ----------------------------------------------------------------------------

const SInterval = setInterval(STimer, 1000);

function STimer() { const Sdate = new Date();
  document.getElementById("sdemo").innerHTML = Sdate.toLocaleTimeString();
}

function sStop() { clearInterval(SInterval); }
</script>

</body>

Vissza oldal elejére!



setTimeout() és clearTimeout()

const idokorlat = setTimeout(feladat, 5000);

A setTimeout() csak egyszer hajtódik végre.

A setTimeout() metódus, ezredmásodpercben meghatározott
időpontban, meghív egy függvényt.
1 másodperc = 1000 ezredmásodperc.

clearTimeout(idokorlat)

Leállítás.
A clearTimeout() módszer megakadályozza,
a funkció elindítását.
Az időtúllépés törléséhez használja a setTimeout()-ból
visszaadott azonosítót :

<button onclick="StopTime()">Stop Timeout</button>

Leállításhoz kattintható gomb, mely meghívja
a setTimeout leállító StopTime() függvényt.

setTimeout() és clearTimeout() példa.

 
<head>
<style>
#timefeladat{width:200px; height:50px; background-color: lime;}
</style>
</head>
<body>

<p>5 másodperced van, a leállításra.</p>
    <div id="timefeladat"></div> <br>
    <button onclick="StopTime()">Stop Timeout</button> <br><br>
    <button onclick="Start()">Start Interval</button>


<script>
const idokorlat = setTimeout(TimeoutFeladat, 5000);

function TimeoutFeladat(){
    var feladat=document.getElementById("timefeladat")
        feladat.style.backgroundColor="red";
        feladat.innerHTML = 'Sokat vártál!<br>Feladat elvégezve!';
}

function StopTime() {
  clearTimeout(idokorlat);
}

// Oldal ismételt meghívásával, újra indítható.
function Start(){
     window.location.reload();
}
</script>

</body>

5 másodperced van, a leállításra.






Indítási lehetőségek:
1. Böngészőablakból frissítjük, azaz,
újra betöltjük az oldalt.

2. Leütjük az F5 billentyűt.

3. Button gombra kattintással meghívjuk
az általunk elhelyezett függvényt, mely
tartalmazza a window.location.reload();
meghatározást.

Vissza oldal elejére!



setInterval() és clearInterval()

const idokoz = setInterval(Ifeladat, 1000);

A setInterval() metódus meghatározott időközönként
(ezredmásodpercben) hív meg, egy függvényt.
1000 ezredmásodperc = 1 másodperc.

A setInterval()metódus addig folytatja a függvény hívását,
amíg clearInterval() metódust meg nem hívják,
vagy a böngészőablak be nem záródik.

clearInterval(idokoz)

Leállítás.
A clearInterval() meghívásával felhasználó leállíthatja,
a setInterval() metódus végrehajtását.

<button onclick="StopIval()">Stop Interval</button>

Leállításhoz kattintható gomb, mely meghívja
a setInterval leállító StopIval() függvényt.

setInterval példa.

 
<head>
<style>
#ivalfeladat{width:200px; height:50px; background-color: lime;}
</style>
</head>
<body>
<p>Tetszőleges időpontban, leállítható.</>
    <div id="ivalfeladat"> </div> <br><br>
    <button onclick="StopIval()">Stop Interval</button> <br><br>
    <button onclick="Start()">Start Interval</button>
	
<script>
const idokoz = setInterval(IntervalFeladat, 2000);

var x=0;
function IntervalFeladat(){
    x++;
    var ifeladat=document.getElementById("ivalfeladat")
    if(x==1){
      ifeladat.style.backgroundColor="red";
      ifeladat.innerHTML = '1.Feladat!<br>Feladat elvégezve!';
    }
    if(x==2){
      ifeladat.style.backgroundColor="aqua";
      ifeladat.innerHTML = '2.Feladat!<br>Feladat elvégezve!';
      x=0;
    }
}

function StopIval() {
  clearInterval(idokoz);
}

// Oldal ismételt meghívásával, újra indítható.
function Start(){
     window.location.reload();
}
</script>

</body>

Tetszőleges időpontban, leállítható.

Vissza oldal elejére!



Tetszőleges időpontban
indítható, leállítható, újra indítható.

<head>
<style>
#tesztfeladat{width:200px; height:50px; background-color: lime;}
</style>
</head>

<body>
<p>
Tetszőleges időpontban:<br> 
indítható, leállítható,<br>
újra indítható, oldal frissítése nélkül.
</p>

  <div id="tesztfeladat"> </div> <br><br>
  <button onclick="StartInterval()">Start Interval</button> <br>
  <button onclick="IntervalStop()">Stop Interval</button>

<script>
function StartInterval(){
    idokozok = setInterval(TesztFeladat, 1000);
}

var a=0;
function TesztFeladat(){
    a++;
    var Tfeladat=document.getElementById("tesztfeladat")
    if(a==1){
      Tfeladat.style.backgroundColor="red";
      Tfeladat.innerHTML = '1.Teszt feladat!<br>Feladat elvégezve!';
    }
    if(a==2){
      Tfeladat.style.backgroundColor="aqua";
      Tfeladat.innerHTML = '2.Teszt feladat!<br>Feladat elvégezve!';
      a=0;
    }
}

function IntervalStop() { clearInterval(idokozok); }
</script>

</body>
Tetszőleges időpontban:
- indítható.
- leállítható
- újra indítható,
oldal frissítése nélkül









Ez még nem biztonságos:
Felgyorsul, ha duplán vagy többször
kattintunk a start gombra.
Ekkor, leállítani sem lehet.
Újra indítani is, csak az oldal
frissítésével lehetséges.


Vissza oldal elejére!



Biztonságos indítás és leállítás akkor lehetséges, ha felhasználó
csak egy műveletigombra kattinthat. (Start vagy Stop)

<head>
<style>
#btesztfeladat{width:200px; height:50px; background-color: lime;}
</style>
</head>

<body>
Tetszőleges időpontban:<br> 
indítható, leállítható, 
újra indítható, oldal frissítése nélkül<br><br>

   <div id="btesztfeladat"></div> <br><br>
   
 <div id"IntervalButton">
   <div id="btnstart"> 
        <button onclick="bStartInterval()">Start Interval</button>
   </div>
   <div id="btnstop"> 
        <button onclick="bIntervalStop()">Stop Interval</button>
   </div>
 </div>

<script>
function bStartInterval(){
    document.getElementById("btnstart").style.display="none";
    document.getElementById("btnstop").style.display="block";
      bidokozok = setInterval(bTesztFeladat, 900);
}

var b=0;
function bTesztFeladat(){
    b++;
    var Tfeladat=document.getElementById("btesztfeladat")
    if(b==1){
      Tfeladat.style.backgroundColor="red";
      Tfeladat.innerHTML = '1.Teszt feladat!<br>Feladat elvégezve!';
    }
    if(b==2){
      Tfeladat.style.backgroundColor="aqua";
      Tfeladat.innerHTML = '2.Teszt feladat!<br>Feladat elvégezve!';
      b=0;
    }
}

function bIntervalStop() {
    document.getElementById("btnstart").style.display="block";
    document.getElementById("btnstop").style.display="none";
      clearInterval(bidokozok);
}
</script>

</body>
Tetszőleges időpontban:
- indítható.
- leállítható
- újra indítható,
oldal frissítése nélkül





Ez már biztonságos.
Felhasználó a start és stop gombra,
csak egyszer kattinthat.

Vissza oldal elejére!



Tetszőleges HTML elemen történő időzítés.

Kattints a következő elemek valamelyikére. Várj 1 másodpercet, és megjelenik egy üzenet.

Ez egy <p> elem területe.
Kattints itt a p elem területén valahol!

<body>
<button onclick="setTimeout(buttonFunction, 1000)">Ez egy button gomb! Kattints ide!</button>

<p class="sargah" onclick="setTimeout(pFunction, 1000)">Ez egy "p" elem területe.<br> 
Kattints itt a p elem területén valahol!</p>

<script>
function buttonFunction() {
  alert('Hello! Button gombra kattintottál!');
}
function pFunction() {
  alert('Hello! A p elem területén kattintottál!');
}
</script> 

</body>

Vissza oldal elejére!



Kiválasztott elem, stílusának megváltoztatása időzítéssel.

Hello World. Stílusod változik. A setInterval időzítés = 1000



<head>
<style>
.alap { color: black; background-color: white; }
.megy { color: green; background-color:yellow; }
.stop { color: red; background-color:lightyellow; }
</style>
</head>

<body>

  <div id="IvalBox" class="alap"> 
     <h3>Hello World. Stílusod változik. A setInterval időzítés = 1000</h3> 
  </div>
<button id="start">Start</button>
<button id="stop">Stop</button>
<button id="alap">Stop és alaphelyzet.</button>


<script>
  document.getElementById("start").addEventListener("click", valtoSzin);
  document.getElementById("stop").addEventListener("click", stopStyle);
  document.getElementById("alap").addEventListener("click", stopAlapStyle);
  
let XIval;

  // Ellenőrzés: XIval-nak, van-e már beállítva intervallum.
  // Ha nincs, akkor most, beállítunk egy intervallumot.
function valtoSzin() {  
    if (!XIval) {  XIval = setInterval(ValtoText, 1000); }
}

function ValtoText() {
      const BoxElem = document.getElementById("IvalBox");
        if (BoxElem.className === "megy") {
            BoxElem.className = "stop";
        } 
        else { BoxElem.className = "megy"; }
}

function stopStyle() {
    clearInterval(XIval);    // Hatástalanítjuk setInterval()-t.
           XIval = null;     // Töröljük interval értéket, a változóból.
}

 // Visszaállítjuk az eredeti stílust.------------------- 
function stopAlapStyle() {
    clearInterval(XIval);
    XIval = null; 
	document.getElementById("IvalBox").className = "alap";
}
</script>

</body>

Vissza oldal elejére!



Egér pozíció.

Egér poziciója, böngészőablak dokumentum területén:
0
0

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>

<body>

<p>Egér poziciója, böngészőablak területén:<br> <span class="egerposition">0<br>0</span> </p>

<script>
    $(document).mousemove(function(event){
      $(".egerposition").html(" Top = " + event.pageY + ",<br> Left = "+ event.pageX);
    });
</script>

</body>

Vissza oldal elejére!