Time Sleep pada Looping Java Script dan Ubah Value Component HTML

By | January 11, 2023
Print Friendly, PDF & Email
83 Views

Java Script dengan sifatnya single thread, asynchronous, dan non blocking tentu tidak seperti pada bahasa pemrograman umumnya yaitu eksekusi akan dilakukan satu-persatu/demi baris tanpa bisa loncat sebelum eksekusi sebelumnya selesai. Biasanya pada bahasa pemrograman umum menggunakan teknik threading. Pada java script misalkan komunikasi berbasis AJAX akan sangat efektif untuk loading beragam data ke sisi klien sehingga aplikasi sangat responsif.

Java Script unggul untuk hal demikian dan cocok untuk server dengan adanya node.js akan tetapi terkadang kita butuh yang namanya operasi matematika yang intensif seperti operasi pada looping. Kita tidak bisa membuat menampilkan animasi spinner yang melibatkan looping secara intensitf. Akibatnya animasi spinner malahan tidak muncul.

Operasi looping yang intensif biasanya menggunakan teknik time.sleep() agar responsif sehingga setiap perubahan componen HTML dapat dilakukan dengan mudah. Sebagai contoh kita tidak akan bisa mengubah component HTML berikut pada saat looping berlangsung

<label id="counter"></label>

didalam looping

for (let i=0;i<100;i++){
   console.log(i);
    $('#counter').text(i);
}

Bahkan kalaupun menggunakan teknik setTimeout() pun tidak akan bisa

for (let i=0;i<100;i++){
   console.log(i);
   setTimeout(function(){},100);
   $('#counter').text(i);
}

Time Sleep

Penggunaan looping sebaiknya dihindari tapi terkadang hal itu tidak memungkinkan sehingga di bahasa pemrograman lain didapatkan feature time.sleep() untuk memberikan ruang/jeda waktu agar operasi yang lainnya bisa berjalan sambil proses yang sedang dikerjakan berjalan. Sayangnya time.sleep() pada java script itu tidak ada! karena sifat nya yang asynchronous 

Await, async, dan Promise

Salah satunya yaitu kita akan membuat function dengan async. Perhatikan button click dibawah ini yang diberikan tambahan async

     function sleep(ms) {
         return new Promise(resolve => setTimeout(resolve, ms));
     }

     //https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep
     $('#btn').click( async function(){
         for (let i=0;i<100;i++){
           console.log(i);
            await sleep(0.1);
            $('#counter').text(i+1);
        }
     });

Dengan cara diatas maka component HTML bisa kita ubah selama proses looping berjalan! Berikut kode lengkapnya

<html lang="en">
    <head>

    	<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
      <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
   

   </head>
   <body>
      <label id="counter">mulai...</label><br>
      <button  id="btn" type="button">OK</button>		
   </body>
   <script>
      


      function sleep(ms) {
          return new Promise(resolve => setTimeout(resolve, ms));
      }

      //https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep
      $('#btn').click( async function(){
          for (let i=0;i<100;i++){
            console.log(i);
            //setTimeout(function(){},1000);
             await sleep(0.1);
             $('#counter').text(i+1);
         }
      });
   </script>
</html>

Spinner berbasis CSS dan JS

Memastikan bahwa aplikasi berjalan dengan baik maka dibutuhkan animasi yang bagus sebisa mungkin tidak perlu menggunakan gambar GiF tapi cukup hanya CSS dan JS saja, kalian bisa peroleh di https://spin.js.org

See also  Plotly JavaScript untuk Visualisasi Grafik yang Dinamis

Atau kalian bisa download spin.js dan spin.css berikut ini spin.js dan spin.css Misalkan kita tambahkan component dan pengaturan sebagai berikut

 

pengaturan CSS

<style>
   .centered {
     position: fixed; /* or absolute */
     top: 50%;
     left: 50%;
   }
</style>

Component HTML

<div id="spinner" class = "centered"></div>

Pengaturan Spinner

var opts = {
     lines: 13, // The number of lines to draw
     length: 38, // The length of each line
     width: 17, // The line thickness
     radius: 45, // The radius of the inner circle
     scale: 1, // Scales overall size of the spinner
     corners: 1, // Corner roundness (0..1)
     speed: 1, // Rounds per second
     rotate: 0, // The rotation offset
     animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
     direction: 1, // 1: clockwise, -1: counterclockwise
     color: '#FAECD6', // CSS color or array of colors
     fadeColor: 'transparent', // CSS color or array of colors
     top: '50%', // Top position relative to parent
     left: '50%', // Left position relative to parent
     shadow: '0 0 1px transparent', // Box-shadow for the lines
     zIndex: 2000000000, // The z-index (defaults to 2e9)
     className: 'spinner', // The CSS class to assign to the spinner
     position: 'absolute', // Element positioning
   };

Penggunaan Spinner didalam Looping

$('#btn').click( async function(){
   let target = document.getElementById('spinner');
   let spinner = new Spinner(opts).spin(target);
    for (let i=0;i<100;i++){
      console.log(i);
      //setTimeout(function(){},1000);
       await sleep(0.1);
       $('#counter').text(i+1);
   }
   spinner.stop();		
});

Bila masih bingung, berikut kode lengkapnya

<html lang="en">
    <head>

    	<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
      <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
   
      <!-- spin -->
    	<link rel="stylesheet" href="spin/spin.css" />
      <script src="spin/spin.js"></script>

      <style>
         .centered {
           position: fixed; /* or absolute */
           top: 50%;
           left: 50%;
         }
      </style>


   </head>
   <body>
      <label id="counter">mulai...</label><br>
      <div id="spinner" class = "centered"></div>
      
      <button  id="btn" type="button">OK</button>		
   </body>
   <script>

   var opts = {
        lines: 13, // The number of lines to draw
        length: 38, // The length of each line
        width: 17, // The line thickness
        radius: 45, // The radius of the inner circle
        scale: 1, // Scales overall size of the spinner
        corners: 1, // Corner roundness (0..1)
        speed: 1, // Rounds per second
        rotate: 0, // The rotation offset
        animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#FAECD6', // CSS color or array of colors
        fadeColor: 'transparent', // CSS color or array of colors
        top: '50%', // Top position relative to parent
        left: '50%', // Left position relative to parent
        shadow: '0 0 1px transparent', // Box-shadow for the lines
        zIndex: 2000000000, // The z-index (defaults to 2e9)
        className: 'spinner', // The CSS class to assign to the spinner
        position: 'absolute', // Element positioning
      };
   function sleep(ms) {
       return new Promise(resolve => setTimeout(resolve, ms));
   }

   //https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep
   $('#btn').click( async function(){
      let target = document.getElementById('spinner');
      let spinner = new Spinner(opts).spin(target);
       for (let i=0;i<100;i++){
         console.log(i);
         //setTimeout(function(){},1000);
          await sleep(0.1);
          $('#counter').text(i+1);
      }
      spinner.stop();		
   });
   </script>
</html>

 

See also  Function Map pada Java Script untuk Looping Array JSON

ref: https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep

Leave a Reply

Your email address will not be published.




Enter Captcha Here :