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

$(document).ready(function(){
	$('#btnone').click(function(){
  	async.waterfall([
      myFirstFunction,
      mySecondFunction,
      myLastFunction,
		], function (err, result) {
      console.log(result); //this result is being passed from 'myLastFunction' with value 'done'
      console.log('grid rendered completely');
	 });
    function myFirstFunction(callback) {
        console.log('first function called');
        setTimeout(function(){
          callback(null, 'one', 'two');
        },3000);
        
    }
    function mySecondFunction(arg1, arg2, callback) {
        console.log(`second function called with  ${arg1} ${arg2}!`);
        setTimeout(function(){
        	callback(null, 'three');
        },4000);  
    }
    function myLastFunction(arg1, callback) {
        console.log(`third function called with  ${arg1}!`);
        callback(null, 'done');
    }
  });
})