Visszahívások ebben a kurzusban:

A(z) Visszahívások fogalomról

A Callback függvények olyan függvények, amelyeket argumentumként adunk át más függvényeknek. A callback függvény ezután meghívható, hogy kiváltson egy későbbi műveletet. A callback függvényeket gyakran arra használjuk, hogy kezeljék egy elvégzett munka eredményét, vagy hogy kezeljenek egy műveletet, amikor egy esemény bekövetkezik. A Callback függvények szinkron és aszinkron programozásban is használhatók.

const sideLength = 5;

// Caller function takes a callback function
function applySideLength(callback) {
  return callback(sideLength);
}

// Callback must expect the possible argument from the calling function
function areaOfSquare(side) {
  return side * side;
}

applySideLength(areaOfSquare); // => 25

A callbackeket függvénykifejezésként is megírhatod:

applySideLength(function squarePerimeter(side) {
  return side * 4;
});

Ez hasznos minta JavaScriptben, mert a JavaScriptet egyszálú futtatókörnyezetnek tervezték, ahol egyszerre csak egy függvényhívás hajtható végre. Végrehajtás közben a futtatókörnyezet nem tud más eseményekre válaszolni, és nem tudja folytatni a végrehajtást, amíg a függvény vissza nem tér.

Sok API-hívás (I/O függvények, időzítők és eseményfigyelők) aszinkron mechanizmust használ, hogy félretegye az aktuális függvényhívást, amíg a munka be nem fejeződik. Befejezéskor egy callback függvény az üzenetsorba kerül, így amikor a futtatókörnyezet éppen függvényhívások között van, az üzenetek feldolgozása a callback függvény meghívásával történik.

Az is hasznos, ha callback függvényeket használunk, mert hivatkozhatnak olyan változókra a closure scope-jukban, amelyek nem érhetők el abban a függvényben, ahol később meghívják őket.

Konkrét példák callback függvényekre

Eseménykezelők

Az eseménykezelők a callbackek gyakori felhasználási esetei JavaScriptben. A böngészőesemények, például az 'onload' vagy az 'onclick', olyan jelzések, amelyek függvények meghívását válthatják ki. A DOM [Document Object Model objektum addEventListener metódusa regisztrál egy callback függvényt, amely akkor hívódik meg, amikor „meghallja”, hogy egy esemény bekövetkezett.

document.addEventListener('onload', function () {
  alert('The webpage has now been loaded');
});

Node.js konvenció

A Node.js környezetben a callback függvények egy konvenciót követnek a program vezérlésének irányítására. A következő mintát követik: a callback függvény első argumentuma egy Error vagy null értéket kaphat; a második és az azt követő argumentumok pedig azt az adatot kapják, amelyet a hívó függvény küldeni szeretne.

Ha hiba történik, előfordulhat, hogy a második és az azt követő argumentumok hiányoznak, ezért nem számíthatsz arra, hogy jelen lesznek.

function operation(a, b, callback) {
  // Work ...

  if (/* an error occurs */) {
    return callback(new Error('An error occurred'))
  }

  // On success:
  callback(null, data)
}

function callback(error, returnedData) {
  if (error) {
    // An error occurred, handle it here.
    return
  }

  // No error occurred, continue with the returned data.
}

operation(1, 2, callback)

Ezzel a mintával gyakran találkozhatsz, amikor aszinkron függvényekkel foglalkozol a vezérlés elősegítése érdekében.

Callbackek álruhában

A gyakori Array függvények callback függvényeket használnak a viselkedésük meghatározására:

• Array.prototype.forEach:

  • Elfogad egy callbacket, amely minden tömbelemre alkalmazza azt.

    [1, 2, 3].forEach(function (element) {
      doSomething(element);
    });
    // => doSomething() is invoked 3 times, once with each element
    

• Array.prototype.map

  • Elfogad egy callbacket, amely minden tömbelemre alkalmazza azt, és az eredményből új tömböt készít.

    [1, 2, 3].map(function (element) {
      return element + 1;
    });
    // => [2, 3, 4]
    

• Array.prototype.reduce

  • Elfogad egy callbacket, amely minden tömbelemre alkalmazza azt, és továbbadja az eredményt a következő meghíváshoz.

    [1, 2, 3].reduce(function (runningSum, element) {
      return runningSum + element;
    }, 0);
    // => 6