Perulangan Di Javascript Dengan Metode Loop Callback

Dalam bahasa pemrograman apapun perulangan sangatlah penting, misalnya jika ingin menampilkan data secara berulang - ulang maka kita perlu yang namanya looping atau perulangan tersebut sehingga akan menampilkan data yang dinamis. beberapa perulangan yang sering kita gunakan adalah dengan menggunakan for, while, foreach, pada tutorial kali ini saya akan menggunakan oerulangan dengan metode loop callback, wah... apa tuh loop callback? Jadi gini loop callback akan berhenti jika data yang kita set dimana total dari data yang telah dihitung dengan jumlah loop nya.
Keunggulannya apa menggunakan metode ini? Keunggulan daripada menggunakan loop calback biasanya adalah dimana jika perulangan di dalam javascript terdapat 1000 data yang harus di looping maka, biasanya browser akan terasa sangat berat dan akan membuat browser user menjadi crash, maka dengan menggunakan perulangan biasanya kurang efektif. lets trying it...
Copy paste source code berikut

<html>
<head>
    <title>Loop callback</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <br>
                <div class="form-group">
                    <textarea class="form-control" name="data" id="data" style="resize:none;" rows="7"></textarea>
                </div>
                <div class="form-group">
                    <button class="btn btn-default" id="submit">Submit</button>
                </div>
            </div>
            <div class="col-md-12" id="results"></div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>

    <script type="text/javascript">

        function loopCallback(param) {
            var i = param.currentLoop;
            var loopEnd = param.total;
            if(i == loopEnd) {
                return;
            }

            jQuery('#results').append(param.data[i] + `<br>`);
            i++;
            console.log(i + ` | ` + loopEnd);
            setTimeout(function() {
                loopCallback({
                    total : param.total,
                    currentLoop : i,
                    data : param.data
                });
            }, 1000);
        }

        jQuery(document.body).on('click','#submit', function() {
            var _data = jQuery('#data').val();
            var splitData = _data.split("\n");
            loopCallback({
                total : splitData.length,
                currentLoop : 0,
                data : splitData
            })
        });
    </script>
</body>
</html>

Sedikit penjelasan singkat dari source code diatas
terlihat bawah bagian function loopCallback ini dia memanggil kembali dirinya sendiri dan akan berhenti jika variabel loopEnd dan variabel i sama maka looping akan berhenti
Looping dengan metode seperti ini cocok untuk logging biasanya.