JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="AppCtrl">
   <div>Message 1: {{message1}}</div>
   <div>Message 2: {{message2}}</div>
   <div>Message 3: {{message3}}</div>
 </div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.factory('interceptor', ['$q', '$timeout', function ($q, $timeout) {
    var _fact = {};
    var _intvalue = 1;
    var waitPromise = $q.when(true);
    
    var _asyncTask = function (time, value) {
        waitPromise = waitPromise.then(function () {
            return $timeout(function () {
                _intvalue = _intvalue * value;
                return _intvalue;
            }, time);
        });
        return waitPromise;
    };

    _fact.asyncTask = _asyncTask;
    return _fact;
}]);

myApp.controller('AppCtrl', ['$scope', 'interceptor', function ($scope, interceptor) {

    interceptor.asyncTask(1500, 10).then(function (returnedval) {
        $scope.message1 = "The value returned is " + returnedval;
    });

    interceptor.asyncTask(1000, 20).then(function (returnedval) {
        $scope.message2 = "The value returned is " + returnedval;
    });

    interceptor.asyncTask(800, 30).then(function (returnedval) {
        $scope.message3 = "The value returned is " + returnedval;
    });

}])