DEV Community

Janu Nirmal
Janu Nirmal

Posted on

Callback Functions

#javascript #webdev #beginners #programming

A function which is passed as an argument to another function

Callback functions are used when we want one function to run **after another function finishes its task

Scenario -1
API call after getting response

<!DOCTYPE html>
<html>
<head>
    <title>API Call Response</title>
</head>
<body>

<script>
    // Function to simulate an API call
    function callApi(callback) {
        setTimeout(() => {
            console.log("API called");
            callback();
        }, 6000);
    }

    // Function to process the data after API call
    function processData() {
        console.log("Data getting processed");
    }

    // Passing processData function as a callback
    callApi(processData);
</script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output

API called
Data getting processed
Enter fullscreen mode Exit fullscreen mode

Scenario 2:
Open file after downloading

<!DOCTYPE html>
<html>
<head>
    <title>Open File After Downloading</title>
</head>
<body>

<script>
    // Function to open the file
    function openFile(download) {
        console.log("File opened after downloading");
        download();
    }

    // Function to simulate downloading the file
    function downloadFile() {
        console.log("File downloading process");
    }

    // Passing downloadFile as a callback function
    openFile(downloadFile);
</script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output

File opened after downloading
File downloading process
Enter fullscreen mode Exit fullscreen mode

Scenario 3:
**Printing of receipt after online payment**

<!DOCTYPE html>
<html>
<head>
    <title>Receipt After Online Payment</title>
</head>
<body>

<script>
    // Function to perform online payment
    function onlinePayment(bill) {
        console.log("Online payment in progress...");
        bill(); // Calling the callback function
    }

    // Callback function to print receipt
    function receiptPrint() {
        console.log("Printing of receipt");
    }

    // Passing receiptPrint as a callback
    onlinePayment(receiptPrint);
</script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output

Online payment
Printing of receipt
Enter fullscreen mode Exit fullscreen mode

Scenario 4
Sent otp after login

<!DOCTYPE html>
<html>
<head>
    <title>Send OTP After Login</title>
</head>
<body>

<script>
    // Function to perform login
    function loginFirst(auth) {
        console.log("Login needs to be done first");
        auth(); // Calling the callback function
    }

    // Callback function to send OTP
    function otpSent() {
        console.log("OTP will be sent next");
    }

    // Passing otpSent as a callback
    loginFirst(otpSent);
</script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output

Login need to be done first
OTP will sent next
Enter fullscreen mode Exit fullscreen mode

Scenario 5
A driver needs to be assigned after booking the cab.

<!DOCTYPE html>
<html>
<head>
    <title>Book Cab First and Then Driver Will Be Assigned</title>
</head>
<body>

<script>
    // Function to book a cab
    function bookCab(rapido) {
        console.log("Cab booked in Rapido");
        rapido(); // Calling the callback function
    }

    // Callback function to assign driver
    function driverAssign() {
        console.log("Driver is assigned now");
    }

    // Passing driverAssign as a callback
    bookCab(driverAssign);
</script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output

Cab booked in rapido
Driver is assigned now
Enter fullscreen mode Exit fullscreen mode

Top comments (0)