water asyncfall

use of asyncwaterfall approach to make async calls

by Kamal Rawat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/async/2.1.2/async.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="button" value="rendergrid" id="btnone"/>

JavaScript

var recorddata = [	{name:'Record1',id:'101'},
										{name:'Record2',id:'102'}
                 ];


$(document).ready(function(){
	$('#btnone').click(function(){
  	async.waterfall([
      getData,
      printData,
      addData,
		], function (err, result) {
      console.log(result.map(x=>x.name)); //this result is being passed from 'myLastFunction' with value 'done'
      console.log('grid rendered completely');
	 });
   
    function getData(callback) {
        console.log('first function called');
        setTimeout(function(){
          callback(null, recorddata);
        },3000);
        
    }
    function printData(arg1, callback) {
    	  var names = arg1.map(x => x.name);
        console.log(`printData called with  ${names}`);
        setTimeout(function(){
        	callback(null, 'three');
        },4000);  
    }
    function addData(arg1, callback) {
        //console.log(`third function called with  ${arg1}!`);
        var newRecord = {name: 'Record3', id: '103'};
        recorddata.push(newRecord);
        console.log('record added successfully');
        callback(null, recorddata);
    }
  });
})