Funkce zpětného volání JavaScriptu

V tomto kurzu se na příkladech dozvíte o funkcích zpětného volání JavaScriptu.

Funkce je blok kódu, který při volání provede určitý úkol. Například,

 // function function greet(name) ( console.log('Hi' + ' ' + name); ) greet('Peter'); // Hi Peter

Ve výše uvedeném programu je hodnota řetězce předána jako argument greet()funkci.

V JavaScriptu můžete funkci také předat jako argument. Tato funkce, která je předána jako argument uvnitř jiné funkce, se nazývá funkce zpětného volání. Například,

 // function function greet(name, callback) ( console.log('Hi' + ' ' + name); callback(); ) // callback function function callMe() ( console.log('I am callback function'); ) // passing function as an argument greet('Peter', callMe);

Výstup

 Ahoj Peter, jsem zpětné volání

Ve výše uvedeném programu existují dvě funkce. Při volání greet()funkce jsou předány dva argumenty (hodnota řetězce a funkce).

Tato callMe()funkce je funkcí zpětného volání.

Výhoda funkce zpětného volání

Výhodou použití funkce zpětného volání je, že můžete počkat na výsledek předchozího volání funkce a poté provést další volání funkce.

V tomto příkladu použijeme setTimeout()metodu k napodobení programu, jehož spuštění je časově náročné, například dat pocházejících ze serveru.

Příklad: Program s setTimeout ()

 // program that shows the delay in execution function greet() ( console.log('Hello world'); ) function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function setTimeout(greet, 2000); sayName('John');

Výstup

 Hello John Hello world

Jak víte, metoda setTimeout () provede blok kódu po zadaném čase.

Zde je greet()funkce volána po 2 000 milisekundách ( 2 sekundy). Během tohoto čekání sayName('John');se provede. Proto je Hello John vytištěn před Hello world.

Výše uvedený kód se provádí asynchronně (druhá funkce; sayName()nečeká na dokončení první funkce; greet()dokončení).

Příklad: Použití funkce zpětného volání

Ve výše uvedeném příkladu druhá funkce nečeká na dokončení první funkce. Pokud však chcete počkat na výsledek předchozího volání funkce před provedením dalšího příkazu, můžete použít funkci zpětného volání. Například,

 // Callback Function Example function greet(name, myFunction) ( console.log('Hello world'); // callback function // executed only after the greet() is executed myFunction(name); ) // callback function function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function after 2 seconds setTimeout(greet, 2000, 'John', sayName);

Výstup

 Hello world Hello John

Ve výše uvedeném programu se kód provádí synchronně. sayName()Funkce je předán jako argument do greet()funkce.

setTimeout()Metoda vykonává greet()funkci pouze po 2 vteřinách. Nicméně sayName()funkce čeká na provedení dané greet()funkce.

Poznámka : Funkce zpětného volání je užitečná, když musíte čekat na výsledek, který vyžaduje čas. Například data pocházející ze serveru, protože trvá, než data dorazí.

Zajímavé články...