Функции за обратно извикване на JavaScript - Какво представляват обратните обаждания в JS и как да ги използвате

Ако сте запознати с програмирането, вече знаете какво правят функциите и как да ги използвате. Но какво представлява функцията за обратно извикване? Функциите за обратно извикване са важна част от JavaScript и след като разберете как работят обратните обаждания, ще станете много по-добри в JavaScript.

Така че в тази публикация бих искал да ви помогна да разберете какво представляват функциите за обратно извикване и как да ги използвате в JavaScript, като разгледате някои примери.

Какво представлява функцията за обратно извикване?

В JavaScript функциите са обекти. Можем ли да предаваме обекти на функции като параметри? Да.

Така че, ние също можем да предаваме функции като параметри на други функции и да ги извикваме във външните функции. Звучи сложно? Нека да го покажа в пример по-долу:

function print(callback) { callback(); }

Функцията print () приема друга функция като параметър и я извиква вътре. Това е валидно в JavaScript и ние го наричаме „обратно извикване“. Така че функция, която се предава на друга функция като параметър, е функция за обратно извикване. Но това не е всичко.

Можете също да гледате видео версията на функциите за обратно повикване по-долу:

Защо се нуждаем от функции за обратно извикване?

JavaScript изпълнява код последователно в ред отгоре надолу. Има обаче някои случаи, при които кодът се изпълнява (или трябва да се изпълнява), след като се случи нещо друго, а също и не последователно. Това се нарича асинхронно програмиране.

Обратните обаждания се уверяват, че дадена функция няма да се изпълни преди дадена задача да бъде завършена, а ще се изпълни веднага след завършването на задачата. Помага ни да разработим асинхронен JavaScript код и ни предпазва от проблеми и грешки.

В JavaScript начинът да създадете функция за обратно извикване е да я предадете като параметър на друга функция и след това да я извикате веднага след като нещо се е случило или някоя задача е изпълнена. Нека да видим как ...

Как да създадете обратно повикване

За да разбера какво съм обяснил по-горе, нека да започна с прост пример. Искаме да регистрираме съобщение в конзолата, но то трябва да е там след 3 секунди.

const message = function() { console.log("This message is shown after 3 seconds"); } setTimeout(message, 3000);

В JavaScript има вграден метод, наречен “setTimeout”, който извиква функция или оценява израз след определен период от време (в милисекунди). И така, функцията „съобщение“ се извиква след изтичане на 3 секунди. (1 секунда = 1000 милисекунди)

С други думи, функцията за съобщения се извиква след като нещо се е случило (след 3 секунди, минали за този пример), но не и преди. Така че функцията за съобщения е пример за функция за обратно извикване.

Какво е анонимна функция?

Като алтернатива можем да дефинираме функция директно в друга функция, вместо да я извикваме. Ще изглежда така:

setTimeout(function() { console.log("This message is shown after 3 seconds"); }, 3000);

Както виждаме, функцията за обратно извикване тук няма име и дефиницията на функция без име в JavaScript се нарича „анонимна функция“. Това прави точно същата задача като примера по-горе.

Обратно повикване като функция със стрелка

Ако предпочитате, можете също да напишете същата функция за обратно извикване като функцията за стрелка ES6, която е по-нов тип функция в JavaScript:

setTimeout(() => { console.log("This message is shown after 3 seconds"); }, 3000);

Какво ще кажете за събития?

JavaScript е управляван от събития език за програмиране. Също така използваме функции за обратно извикване за декларации за събития. Да приемем например, че искаме потребителите да кликват върху бутон:

Click here

Този път ще видим съобщение на конзолата само когато потребителят щракне върху бутона:

document.queryselector("#callback-btn") .addEventListener("click", function() { console.log("User has clicked on the button!"); });

Така че тук първо избираме бутона с неговия идентификатор и след това добавяме слушател на събития с метода addEventListener. Необходими са 2 параметъра. Първият е неговият тип „щракване“, а вторият параметър е функция за обратно извикване, която регистрира съобщението при щракване върху бутона.

Както можете да видите, функциите за обратно извикване се използват и за декларации за събития в JavaScript.

Увийте

Обратните обаждания се използват често в JavaScript и се надявам тази публикация да ви помогне да разберете какво всъщност правят и как да работите с тях по-лесно. След това можете да научите за JavaScript Promises, което е подобна тема, която обясних в новия си пост.

Ако искате да научите повече за уеб разработката, не се колебайте да ме последвате в Youtube !

Благодаря ви, че прочетохте!