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

Utilizing Next.js to conditionally display data

The hyperlink function is not operational in Gmail attachments

Is it necessary to close the browser for jQuery to reload an XML document?

Transferring a FormData object between different servers

File writing issues are plaguing NodeJS, with middleware failing to function as well

Error 4 encountered when attempting to upload files using Ajax to a PHP server

Calculate the length of a JSON array by using the value of one of its

Are you experiencing issues with the .submit() function when used in conjunction with other

The JSON.stringify() function helps to convert data into a JSON-formatted string, avoiding any potential "c

"Unexpected outcome: Angular's HTTP request for a JSON file yields an undefined

Steps for submitting a form once all inputs have been verified

The Discord.js bot is unable to send messages in embedded format

VueJS 3 custom Checkbox fails to update UI upon clicking

Error: Unable to change image -- TypeError: Cannot assign value to null property 'src'

Troubleshooting Rails 5 and AJAX modal login issues

Tips for positioning a div element within the body of a webpage to maintain a predetermined height and width

Guide on obtaining an obscure style guideline in MS Edge using JavaScript

The output from VScode-Code-Runner is limited to just the directory, with no additional

Delayed response of text effects in JQuery on page load

Signal check indicates that the Internet connection has been restored