Vad är en återuppringning?
Callback-funktioner är samma gamla JavaScript-funktioner. De har ingen speciell syntax, eftersom de helt enkelt är funktioner som skickas som ett argument till en annan funktion.
Funktionen som tar emot återuppringningen som ett argument kallas en högre ordningsfunktion.
Vilken funktion som helst kan användas som en återuppringning, eftersom det räcker att skicka den till en annan funktion som en parameter.
Återuppringningsfunktioner är inte asynkrona till sin natur, men de används ofta för det ändamålet, till exempel när de skickas som argument till de olika händelser som accepteras av webbläsaren API:ervilket tillåter JavaScript att interagera med DOM på en sida eller med systemet.
Hur man skapar en återuppringning
För att skapa en återuppringning deklarerar du helt enkelt en funktion, skickar den till en annan funktion som en parameter och kör den i den funktionen. Nedan finns ett exempel på en återuppringning.
// Vår funktionsfunktion HiWorld() { console.log(‘Hej världen!’); } // Funktion som accepterar en annan funktion som en parameter funktion talk(callback) { callback(); // Detta anrop kallas en callback } // Vi skickar en funktion till en annan talk(HiWorld);
Det vi har gjort i exemplet är att definiera HiWorld()-funktionen och talK-funktionen, som accepterar en annan funktion som ett argument. Vi körde sedan funktionen talk som vi skickade funktionen HiWorld() till som en parameter.
När vi kör ovanstående kod får vi denna utdata:
Hej världen!
Asynkronism med återuppringningar
JavaScript är inte ett asynkront språk av naturen. Men JavaScript-återuppringningar används ofta för att skapa asynkron kod när den används med API:erna i JavaScript-runtime-miljön, antingen en webbläsare eller Node.js-miljön.
Du kan till exempel skicka en funktion som en återuppringning till webbläsarhändelser, såsom onClick, onMouseOver eller onChange-händelser.
Du vet inte när en användare klickar på en knapp, men du kan skapa en hanterare som hanterar händelsen när den inträffar. Hanteraren accepterar en funktion som en återuppringning, som kommer att exekveras när händelsen utlöses:
document.getElementById(‘#btn’).addEventListener(‘click’, () => { console.log(‘Knappen har klickats’); });
Det är också mycket vanligt att lägga till kod till load-händelsen för webbläsarens fönsterobjekt, vilket kommer att exekvera callback-funktionen vi definierar när sidan har laddats och DOM är redo:
window.addEventListener(‘load’, () => { console.log(‘Sida laddad’); });
Vi använder inte bara callbacks för att hantera webbläsarens DOM-händelser, eftersom en annan mycket vanlig användning av callback-funktioner är i setTimeout-händelser, som gör att vi kan exekvera funktionen vi skickar som en parameter när tiden vi definierar i millisekunder går ut:
setTimeout(() => { console.log(‘Det har gått en sekund’); }, 1000);
Med tiden har de enkla HTML-sidorna på 1990-talet utvecklats till dynamiska applikationer som körs i din webbläsare. Applikationer gör ofta förfrågningar till API:er som finns på olika servrar. Det vanligaste nuförtiden är att dessa förfrågningar exekveras asynkront, transparent för användaren, som i fallet med XHR-förfrågningar, som accepterar en återuppringningsfunktion som en parameter.
I följande exempel tilldelar vi en funktion till egenskapen onreadystatechange för ett XMLHttpRequest-objekt. Funktionen vi tilldelar kommer att utföras som en återuppringning när ett svar på begäran tas emot:
const xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState === 4) { // Vi kontrollerar om begäran har slutförts framgångsrikt. if (xhr.status === 200) { console.log(xhr.responseText); } else { // Ett fel har inträffat console.error(‘error’); } } } // Iniciamos la petición xhr.open(‘GET’, ‘https://api.tld/endpoint’); xhr.send();
Om vi inte använde en asynkron funktion, skulle webbläsaren behöva fortsätta kontrollera om ett svar har mottagits, vilket blockerar exekveringen av JavaScript-koden i webbläsaren, eftersom JavaScript är ett synkront, entrådigt språk av naturen.
Vi använder även återuppringningar när vi använder JavaScript hämta APIvilket är ett av de bästa sätten att göra asynkrona förfrågningar.
Felhantering vid återuppringningar
Det finns flera strategier för att hantera callback-fel när callbacks exekveras asynkront. Till exempel är det vanligaste i Node.js-miljön och i de allra flesta webbläsar-API:er att den första parametern i en callback-funktion är ett objekt som innehåller ett möjligt fel. Denna filosofi hänvisas ofta till som error-first callbacks.
Nedan kan du se ett exempel där vi läser en fil från systemet:
fs.readFile(‘/file.json’, (error, data) => { if (error !== null) { // Felhantering console.log(error); return; } // Inget fel har inträffat konsolen. log(data); })
Vanligt problem med återuppringningar
Callback-funktioner är bra för enkla fall, men de är inte problemfria när koden blir komplicerad.
När vi kapslar flera återuppringningar, lägger var och en till en nivå av djup till meddelandekön. Även om JavaScript kan hantera dessa situationer utan problem, kan koden bli svår att läsa. Dessutom blir det också svårare att veta var ett fel har uppstått.
Nedan kapslar vi fyra återuppringningar, vilket inte är ovanligt, men du kommer sannolikt att stöta på mycket mer extrema fall:
window.addEventListener(‘load’, () => { document.getElementById(‘btn’).addEventListener(‘click’, () => { setTimeout(() => { items.forEach(item => { // Kod }) }, 2000) }); });
Denna situation är känd som återuppringning helvete. Men vi kan undvika dem genom att använda de alternativ som finns i JavaScript.
Alternativ till återuppringningsfunktioner
Sedan ES2015-utgåvan av JavaScript har flera funktioner introducerats som gör att du kan hantera asynkron JavaScript-kod och undvika callback-helvetet. Det här är löften och användningen av Async/Await:
– Löften: Löften i JavaScript
– Async/Await: Async/Await i JavaScript
Senaste nyheterna från Hi-Tech-världen
Hur man fixar överdriven MySQL CPU-användning
Vad händer om vi inser att en serie databaser som vi trodde var optimerade genom användning av index, har börjat konsumera CPU-användningstid för en server…
Hur man använder endsWith-metoden i JavaScript
I den här korta handledningen ska vi se vad endsWith-metoden, introducerad i JavaScript ES6, är och hur den används med strängar i JavaScript. EndsWith-metoden är…
Återuppringningar i JavaScript
Callback-funktioner är samma gamla JavaScript-funktioner. De har ingen speciell syntax, eftersom de helt enkelt är funktioner som skickas som ett argument till en annan funktion. Funktionen som tar emot…
Hur du utökar din apps aktiva användarbas
META: Läs vidare för att ta reda på de bästa sätten att få människor att engagera sig – och viktigast av allt, stanna kvar – i din app. BILD: https://unsplash.com/photos/ZVhbwDfLtYU (Unsplash) En mobilapp är ingenting utan användare…
Hur man skapar PDF med JavaScript och jsPDF
Att skapa dynamiska PDF-filer direkt i webbläsaren är möjligt tack vare jsPDF JavaScript-biblioteket. I den sista delen av denna artikel har vi förberett en praktisk handledning där jag…
Hur man känner igen cybervåld
Cybervåld, det vill säga våldets digitala dimension som främst drabbar kvinnor och är nära kopplat till det våld som förekommer i den “verkliga världen”, är ett växande fenomen som är…
Innehållskunskap är makt
Kraften i webbinnehåll är oändligt överlägsen vad du tror; med andra ord, det är mycket viktigare vad du publicerar och vad du sänder, än var du…
projekt
Vi använder våra egna och tredje parts cookies för att förbättra våra tjänster, sammanställa statistisk information och analysera dina surfvanor. Detta gör att vi kan anpassa innehållet vi erbjuder och visa dig annonser som är relaterade till dina preferenser. Genom att klicka på “Acceptera alla” godkänner du lagringen av cookies på din enhet för att förbättra webbplatsnavigering, analysera trafik och hjälpa våra marknadsföringsaktiviteter. Du kan också välja “Endast systemcookies” för att endast acceptera de cookies som krävs för att webbplatsen ska fungera, eller så kan du välja de cookies du vill aktivera genom att klicka på “inställningar”.
Acceptera alla Endast systemcookies Konfiguration
Alltid aktiv
Strikt nödvändiga cookies
Dessa cookies är nödvändiga för att webbplatsen ska fungera och kan inte inaktiveras i våra system. De ställs i allmänhet bara in som svar på dina handlingar när du begär tjänster, som att ställa in dina integritetsinställningar, logga in eller fylla i formulär. Du kan ställa in din webbläsare för att blockera eller varna dig för dessa cookies, men vissa delar av webbplatsen kommer inte att fungera. Dessa cookies lagrar ingen personligt identifierbar information
