Using Multithreading and the Subscribe/Publish Methodology in JavaScript

Question

Using Multithreading and the Subscribe/Publish Methodology in JavaScript

Is it true that JavaScript does not support multithreading? I am seeking expert advice on a specific scenario.

I need to make an AJAX call and upon successful completion, trigger a set of events to update different parts of the UI simultaneously.

Would using a Subscribe/Publish pattern allow me to have multiple listeners for the AJAX completion event?
If so, how are these listeners notified when published? Is it done in a multithreaded way or one by one?

Please suggest the best approach to achieve this. Your insights would be greatly valued.

EDIT::

I am aware that popular frameworks like JQuery support this pattern. However, I need to create this functionality from scratch due to our own framework constraints.

javascript ajax multithreading publish-subscribe

Answer 1

Answer №1

If you're looking to kickstart your project, I have a Request Pooler that could be really helpful. [Since this answer was accepted I've retired the pooler in favor of a more comprehensive "AJAX Helper" - the link has been updated.]

While it may not cover all your needs, it's a functional solution that has stood the test of time:

Depressed Press DP_AJAX

This tool allows for handling multiple requests at once with timeout/retry options, per-request handlers, and easy integration with other code.

You can set up a pool (specifying how many simultaneous requests are permitted) and send requests its way. Once they're completed, they trigger the specified handler function.

Here's a simple example of how it works:

// Handler function
function AddUp(Num1, Num2, Num3) {
    alert(Num1 + Num2 + Num3);
};

// Initialize the Pool
myRequestPool = new DP_RequestPool(4);

// Begin the Interval
myRequestPool.startInterval(100);

// Create the Request
myRequest = new DP_Request(
    "GET",
    "http://www.mysite.com/Add.htm",
    {"FirstNum" : 5, "SecondNum" : 10},
    AddUp,
    [7,13]);

// Add the request to the queue
myRequestPool.addRequest(myRequest);

This tool is open source, so you're welcome to modify it as needed.

Jim Davis

Answer 2

If you're looking to kickstart your project, I have a Request Pooler that could be really helpful. [Since this answer was accepted I've retired the pooler in favor of a more comprehensive "AJAX Helper" - the link has been updated.]

While it may not cover all your needs, it's a functional solution that has stood the test of time:

Depressed Press DP_AJAX

This tool allows for handling multiple requests at once with timeout/retry options, per-request handlers, and easy integration with other code.

You can set up a pool (specifying how many simultaneous requests are permitted) and send requests its way. Once they're completed, they trigger the specified handler function.

Here's a simple example of how it works:

// Handler function
function AddUp(Num1, Num2, Num3) {
    alert(Num1 + Num2 + Num3);
};

// Initialize the Pool
myRequestPool = new DP_RequestPool(4);

// Begin the Interval
myRequestPool.startInterval(100);

// Create the Request
myRequest = new DP_Request(
    "GET",
    "http://www.mysite.com/Add.htm",
    {"FirstNum" : 5, "SecondNum" : 10},
    AddUp,
    [7,13]);

// Add the request to the queue
myRequestPool.addRequest(myRequest);

This tool is open source, so you're welcome to modify it as needed.

Jim Davis

Answer 3

Answer №2

I came across an informative article that delves into the topic you are exploring in depth. It suggests creating a JavaScript file with an array to store handlers/subscribers. Each subscriber then adds itself to this array. When it's time to close your Ajax call, a function is called which loops through each subscriber and notifies them individually:

this.subscribers = [];
...
 for(var i = 0; i < this.subscribers.length; i++)
  {
    this.subscribers[i].notifyHandler.call(this, eventArguments);
 }
...

Answer 4

I came across an informative article that delves into the topic you are exploring in depth. It suggests creating a JavaScript file with an array to store handlers/subscribers. Each subscriber then adds itself to this array. When it's time to close your Ajax call, a function is called which loops through each subscriber and notifies them individually:

this.subscribers = [];
...
 for(var i = 0; i < this.subscribers.length; i++)
  {
    this.subscribers[i].notifyHandler.call(this, eventArguments);
 }
...

Answer 5

Answer №3

Can this function as a lightweight system for passing messages between components?

function CustomMessenger() {
    this.MessageQueues = {};

    this.PostMessage = function (Subject) {
        var Queue = this.MessageQueues[Subject];
        if (Queue) return function() {
                                        var i = Queue.length - 1;
                                        do Queue[i]();
                                        while (i--);
                                    }
        }

    this.Listen = function (Subject, Listener) {
        var Queue = this.MessageQueues[Subject] || [];
        (this.MessageQueues[Subject] = Queue).push(Listener);
    }
}

you can use it like this:

var messenger = new CustomMessenger();
messenger.Listen("some message", callback());
messenger.Listen("some other message", anotherCallback());
messenger.Listen("some message", yesAnotherCallback());

and later:

messenger.PostMessage("some message");

will dispatch the stored messages

Answer 6

Can this function as a lightweight system for passing messages between components?

function CustomMessenger() {
    this.MessageQueues = {};

    this.PostMessage = function (Subject) {
        var Queue = this.MessageQueues[Subject];
        if (Queue) return function() {
                                        var i = Queue.length - 1;
                                        do Queue[i]();
                                        while (i--);
                                    }
        }

    this.Listen = function (Subject, Listener) {
        var Queue = this.MessageQueues[Subject] || [];
        (this.MessageQueues[Subject] = Queue).push(Listener);
    }
}

you can use it like this:

var messenger = new CustomMessenger();
messenger.Listen("some message", callback());
messenger.Listen("some other message", anotherCallback());
messenger.Listen("some message", yesAnotherCallback());

and later:

messenger.PostMessage("some message");

will dispatch the stored messages

Answer 7

Answer №4

It is highly recommended to utilize a library for this task in order to prevent any browser compatibility issues. One popular option is jQuery, which offers Ajax capabilities allowing you to run code upon completion of the call. You can refer to the documentation here for more information.

Answer 8

It is highly recommended to utilize a library for this task in order to prevent any browser compatibility issues. One popular option is jQuery, which offers Ajax capabilities allowing you to run code upon completion of the call. You can refer to the documentation here for more information.

Answer 9

Answer №5

To run functions simultaneously, follow this method:

this.functionsToRun = [];
...
 for(var j = 0; j < this.functionsToRun.length; j++)
  {
    setTimeout(function(){this.functionsToRun[j].runFunction.call(this, args);},0);
 }
...

Answer 10

To run functions simultaneously, follow this method:

this.functionsToRun = [];
...
 for(var j = 0; j < this.functionsToRun.length; j++)
  {
    setTimeout(function(){this.functionsToRun[j].runFunction.call(this, args);},0);
 }
...

Using Multithreading and the Subscribe/Publish Methodology in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Client-side Results in Meteor.http.call Return Undefined

Encountered an unexpected identifier error while executing a Nuxt.js project

Struggling to get JavaScript to successfully load a .txt file in order to load various links

Can a wasm file be registered in a similar way to a JavaScript file?

Reorganizing Elements within an Array using JavaScript

"Eliminate a specified range of characters from a string using JavaScript

Retrieving a map using latitude and longitude coordinates saved in a database

Instructions for printing a page and closing the Print window using Selenium

Validation of VAT numbers using JavaScript instead of PHP

Experiencing a strange response while attempting to parse the result of an Angular 2 HTTP JSON request

What is the process for accessing and modifying cookies in a local file:/// HTML document?

Incorporating a series of image links into a Three.js project with the addition of a

How do I fix TypeError: req.flash is not a valid function?

Transferring class titles between div elements

What is the optimal value for the variable x in this scenario?

Displaying an iframe in Internet Explorer

Obtain the specific key's value from a new Map state

Error: JSON parsing stopped due to unexpected end of file while attempting to parse data

Create div elements using JSX and add them to an array

The use of dangerouslySetInnerHTML in a React application is causing issues when trying to include Segment.io tags