JavaScript class with callback function commonly used

Question

JavaScript class with callback function commonly used

I am looking to create a JavaScript class that can register multiple functions to run with a common callback. Each registered function should run asynchronously, and once they have all completed, the specified callback function should be executed.

In addition, I would like to set a maximum time limit for the callback function to execute. For example, if this limit is set to 3000 milliseconds and the registered functions take longer than 3000 ms to return, the callback function should still proceed without waiting for all functions to finish their execution.

The code needs to be flexible, standalone, and reusable. It should assume that any registered function will call a specific function we define to mark its completion. For example, at the end of a function, I would use myClass.markDone() to signal to the class that it has finished executing.

Is it possible to achieve this using JavaScript or Angular.js without relying on jQuery?

javascript ajax angularjs callback

Answer 1

Answer №1

If you want to accomplish this task, explore these pre-built modules within Angular:

https://docs.angularjs.org/api/ng/service/$q

https://docs.angularjs.org/api/ng/service/$timeout

Check out this example implementation on Plunkr:

qAllWithTimeout([
    makePromise(function(callback) {
      // Simulate asynchronous call 1
      setTimeout(callback, 200);
    }),
    makePromise(function(callback) {
      // Simulate asynchronous call 2
      setTimeout(callback, 500);
    }),
    makePromise(function(callback) {
      // Lengthy simulated asynchronous call 2
      setTimeout(callback, 10500);
    })
  ], 3000)
    .then(function() {        
        $scope.state = 'ready';
    })

http://plnkr.co/edit/hNo9kJmKIR4hEoNk9pP2?p=preview

Answer 2

If you want to accomplish this task, explore these pre-built modules within Angular:

https://docs.angularjs.org/api/ng/service/$q

https://docs.angularjs.org/api/ng/service/$timeout

Check out this example implementation on Plunkr:

qAllWithTimeout([
    makePromise(function(callback) {
      // Simulate asynchronous call 1
      setTimeout(callback, 200);
    }),
    makePromise(function(callback) {
      // Simulate asynchronous call 2
      setTimeout(callback, 500);
    }),
    makePromise(function(callback) {
      // Lengthy simulated asynchronous call 2
      setTimeout(callback, 10500);
    })
  ], 3000)
    .then(function() {        
        $scope.state = 'ready';
    })

http://plnkr.co/edit/hNo9kJmKIR4hEoNk9pP2?p=preview

Answer 3

Answer №2

Unsure if this code will work as it has not been tested yet. It may provide some insights.

function TestFunction(callback, timeout){
    this._callback = callback;
    this._timeout = timeout;
    this._forceFinish = false;
    this.fun_list = [];
    this.RegisterFunction = function(func){
        this.fun_list.push(func);
    };

    this.startCount = -1;
    this.finishCount = 0;

    this.timeOutFunction= function(){
        this.startCount++;
        fun_list[this.startCount]();
        this.commonCallback();
    }
    this.Start = function(){
        for(var i=0; i <this.fun_list.length ;i++){
            setTimeout( this.timeOutFunction, 0);
        }
        setTimeout( this.watcherFunction, 1 );
    };

    this.commonCallback = function(){
        if( this._forceFinish){
            this._callback();
        }else{
            this.finishCount++;
            if(this.finishCount == this.fun_list.length ){
                this._callback();
            }
        }
    }

    this.watcherFunction = function(){
        if( this._timeout !=0 ){
            this._timeout-1;
            setTimeout( this.watcherFunction, 1 );
        }else{
            this._forceFinish = true;
            this.commonCallback();
        }
    }
}

//usage

var funcManager = new TestFunction(finalFunction, 60 * 1000);
funcManager.RegisterFunction ( func1 );
funcManager.RegisterFunction ( func2 );
funcManager.RegisterFunction ( func3 );
funcManager.Start();

function finalFunction(){
    alert("all functions executed" );
}

Answer 4

Unsure if this code will work as it has not been tested yet. It may provide some insights.

function TestFunction(callback, timeout){
    this._callback = callback;
    this._timeout = timeout;
    this._forceFinish = false;
    this.fun_list = [];
    this.RegisterFunction = function(func){
        this.fun_list.push(func);
    };

    this.startCount = -1;
    this.finishCount = 0;

    this.timeOutFunction= function(){
        this.startCount++;
        fun_list[this.startCount]();
        this.commonCallback();
    }
    this.Start = function(){
        for(var i=0; i <this.fun_list.length ;i++){
            setTimeout( this.timeOutFunction, 0);
        }
        setTimeout( this.watcherFunction, 1 );
    };

    this.commonCallback = function(){
        if( this._forceFinish){
            this._callback();
        }else{
            this.finishCount++;
            if(this.finishCount == this.fun_list.length ){
                this._callback();
            }
        }
    }

    this.watcherFunction = function(){
        if( this._timeout !=0 ){
            this._timeout-1;
            setTimeout( this.watcherFunction, 1 );
        }else{
            this._forceFinish = true;
            this.commonCallback();
        }
    }
}

//usage

var funcManager = new TestFunction(finalFunction, 60 * 1000);
funcManager.RegisterFunction ( func1 );
funcManager.RegisterFunction ( func2 );
funcManager.RegisterFunction ( func3 );
funcManager.Start();

function finalFunction(){
    alert("all functions executed" );
}

Answer 5

Answer №3

I previously sought clarification in a comment, but proceeded to create a solution nonetheless. Below is the draft I came up with based on your request:

function AsyncBatch() {
    this.runnables = new Set();
}

AsyncBatch.prototype = {
    runnables: null,
    timeoutId: 0,

    add: function(runnable) {
        this.runnables.add(runnable);
    },

    start: function() {
        this.timeoutId = window.setTimeout(this.timeout.bind(this), 3000);

        let promises = [];
        for (let runnable of this.runnables) {
            promises.push(new Promise(resolve => {
                runnable(resolve);
            }));
        }
        Promise.all(promises).then(() => this.allDone());
    },

    allDone: function() {
        if (this.timeoutId === 0) return;
        window.clearTimeout(this.timeoutId);
        this.finish();
    },

    timeout: function() {
        this.timeoutId = 0;
        this.finish();
    },

    finish: function() {
        // Actions to be taken when all callbacks are completed or the batch times out
    },
};

To utilize this solution, follow these steps:

Instantiate an AsyncBatch object.
Use .add() method as needed to add functions that expect a callback parameter upon completion.
Invoke .start() on the instance of AsyncBatch to initiate asynchronous execution of all added functions and start a timer.
If all functions complete before the timer expires, .allDone() will halt the timer and call .finish().
If the timer elapses before all functions complete, .finish() will be called and the timerId will be set to 0 to prevent redundant calls to .finish().

Answer 6

I previously sought clarification in a comment, but proceeded to create a solution nonetheless. Below is the draft I came up with based on your request:

function AsyncBatch() {
    this.runnables = new Set();
}

AsyncBatch.prototype = {
    runnables: null,
    timeoutId: 0,

    add: function(runnable) {
        this.runnables.add(runnable);
    },

    start: function() {
        this.timeoutId = window.setTimeout(this.timeout.bind(this), 3000);

        let promises = [];
        for (let runnable of this.runnables) {
            promises.push(new Promise(resolve => {
                runnable(resolve);
            }));
        }
        Promise.all(promises).then(() => this.allDone());
    },

    allDone: function() {
        if (this.timeoutId === 0) return;
        window.clearTimeout(this.timeoutId);
        this.finish();
    },

    timeout: function() {
        this.timeoutId = 0;
        this.finish();
    },

    finish: function() {
        // Actions to be taken when all callbacks are completed or the batch times out
    },
};

To utilize this solution, follow these steps:

Instantiate an AsyncBatch object.
Use .add() method as needed to add functions that expect a callback parameter upon completion.
Invoke .start() on the instance of AsyncBatch to initiate asynchronous execution of all added functions and start a timer.
If all functions complete before the timer expires, .allDone() will halt the timer and call .finish().
If the timer elapses before all functions complete, .finish() will be called and the timerId will be set to 0 to prevent redundant calls to .finish().

JavaScript class with callback function commonly used

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to retrieve a collection of DOM elements in JSX?

Dealing with incoming data in a yii2 RESTful service

A comprehensive guide on displaying data in Angular using an API

Scrolling the Ionic framework to a position below zero

ReactJS: Checkbox status remains consistent through re-rendering of Component

Updating parameter value upon the execution of an internal function in Javascript

Is it possible to analyze an API call and determine the frequency of a specific field?

Utilizing Angular UI-Router for Efficient Multiple Named Views Management

How can I dynamically populate my select field with JSON data using React.js?

Apply jQuery styling to new select box on page in order to maintain consistent styling throughout

Using CSS to style a repeater that only shows the initial record

Retrieve data from a MySQL database with multiple values stored in a single row

What is the best way to loop through ng-repeat with key-value pairs in order to display each

Associate the URL with the object to retrieve the corresponding object

Error: Unable to locate module: Material-UI - Please check the path and try again

Update the html() function to include any content that has been typed into a

Learn how to retrieve data using the $.ajax() function in jQuery and effectively showcase it on your HTML page

Tips for achieving expansion of solely the clicked item and not the whole row

tips for remaining in modal window post form submission

Loading remote content on a server for my Firefox OS application - On the Web and FxOS device