Significant lag experienced when using $rootscope.$on with a large object

In my AngularJS project, I am working with a JavaScript object (factory) that contains numerous functions spanning 4000 lines. Creating the object from data fetched from PHP happens pretty quickly.

$http.get('pivots/list.php')
            .success(function (data) {
                $scope.listOfPivots = data;
                  for (var i = 0; i < $scope.listOfPivots.length; i++ ) {
                    pivot = new pivotFactory($scope.listOfPivots[i]);

After creating the object, I need to share it with other controllers.

$rootScope.$broadcast("Update", pivot);

However, when I receive the selected object, there is a noticeable pause of a few seconds.

$rootScope.$on("Update", function(event, p) {
       $scope.selectedPivot = p;
});

I would like to measure this timeout in order to display a progress bar or find ways to prevent this long delay. What steps can I take to address this issue?

javascriptangularjsobject

Answer №1

Rather than using emit and broadcast, a more efficient method is to assign a variable to a value like this: $rootScope.selectedpivot=pivot. By doing so, the value will be accessible in other controllers as well, eliminating the need for timeouts.

For example, if you assign $rootScope.data=10 in one controller, you can then access that value in another controller by simply calling console.log($rootScope.data), which will output 10.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Steady layout of grid for the navigation bar and

Currently, I am in the process of developing a control panel with the use of HTML and CSS. To structure the page, I opted for a grid layout. However, I encountered an issue where the navbar and sidebar do not stay fixed on the screen despite trying various ...

javascripthtmlcss

Next.js: Generating static sites only at runtime due to getStaticProps having no data during the build phase, skipping build time generation

I am looking to customize the application for individual customers, with a separate database for each customer (potentially on-premise). This means that I do not have access to any data during the build phase, such as in a CI/CD process, which I could use ...

javascriptreactjstypescriptnext.js

How can I incorporate multiple states into a conditional statement in ReactJS?

Is there a more efficient way to achieve this task? I'm struggling to come up with a cleaner solution as the current approach looks messy. I need to check multiple states in an if statement and the only method I can think of right now is the one prese ...

javascriptreactjs

Exploring nested objects and their keys and values using VBA

I have implemented the Deepl translation API in VBA to handle translations. The request is functioning smoothly and I am receiving translated html-text as output. However, my challenge lies in extracting the "text" value from the object that is returned: ...

arraysjsonvbaobject

Web API Implementation of Null-Safe Empty List Handling

I have a scenario where an angular controller is making a POST request to a web API method. I attempted to implement null safety with the IEnumerable, but it ended up causing the IEnumerable to always be empty. Here is the angular call: $http.post(custom ...

c#.netangularjsasp.net-web-api

Encountering a problem with Vue when running the node-rdkafka package

I added node-rdkafka to my project using the command npm install node-rdkafka. Then, I included it in my code like this: import Kafka from 'node-rdkafka'; created() { console.log(Kafka.features); } An error occurred when running npm r ...

javascriptvue.jsapache-kafkakafka-consumer-api

Navigating through different states and managing the URL manually can be a breeze with AngularJS

In my current setup using the meanjs stack boilerplate, I am facing an issue with user authentication. When users log in, their state remains 'logged-in' as long as they navigate within the app starting from the base root URL '/'. This ...

javascriptnode.jsangularjsexpressmeanjs

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/: https://i.stack.imgur.com/svzIg.png This table should have two scrollbars, one for the light blue SCROLL column and another ...

javascripthtmlcsshtml-table

Tips for navigating through an array of images

I am attempting to create a feature similar to Snapchat stories, where an array of images is displayed for a set amount of time before returning to the previous screen. Here is an example code snippet: if (images.length > 0) { let timeout; ...

javascriptreactjsreact-native

Utilizing Vue.js components and properties to invoke a function

Trying to create a shopping cart button that keeps track of how many times it's clicked, but encountering an issue where the function called by the button doesn't receive the correct parameter. I attempted using {{id}} and :onClick="addThisToCar ...

javascripthtmlvue.js

Bypassing reCaptcha V2 in C# Selenium without relying on callback functions

Recently, I have been utilizing the 2captcha.com API to bypass reCaptcha V2. However, I seem to be encountering an issue with implementing the callback function. Every time I try to run the callback function, nothing seems to happen and the output is alway ...

javascriptc#seleniumrecaptcha

Clicking on the mail icon will open the mail with the associated mail id

When the mail icon is clicked, the mail will open with this email address. I am currently working on a project where clicking the mail icon will redirect to the mail signup page with the corresponding email address. In the image below, the red border ind ...

javascripthtmlangularjscss

Having issues with using the class selector in SVG.select() method of the svg.js library when working with TypeScript

Exploring the capabilities of the svg.js library with typescript has presented some challenges when it comes to utilizing CSS selectors. My goal is to select an SVG element using the select() method with a class selector. In this interactive example, this ...

javascriptangulartypescriptsvg.js

How to create a loop in Selenium IDE for selecting specific values from a drop-down list?

Is there a way to use Selenium IDE and JavaScript to test a drop-down box with specific items, not all of them, and continuously loop through until the entire list is covered? Any tips or recommendations on how to accomplish this? ...

javascriptloopsseleniumide

Enabling Cross-Origin Resource Sharing (CORS) with Javascript on the client side during

Currently, I am attempting to incorporate another website's login verification system into my own site. Although the code below is successfully retrieving the correct response ID, I am encountering CORS errors preventing the completion of the login pr ...

javascriptajaxcors

Trouble with mapping an array in my Next JS application

When working on my Next JS app, I encountered an error while trying to map an array for the nav bar. The error message reads: TypeError: _utils_navigation__WEBPACK_IMPORTED_MODULE_6___default(...).map is not a function. Here is the code snippet that trigge ...

javascriptreactjsnext.js

Why is the React Util js file not functioning properly when using an absolute path?

Help needed! I'm utilizing create-react-app without ejecting. I can't seem to figure out why this code snippet is not functioning correctly. import { capitalizeFirst } from 'util/util.js'; //This line is causing issues import AdminIn ...

javascriptreactjsimportexportcreate-react-app

Trouble in testing: ComponentDidMount is mysteriously bypassed by Jest/Enzyme when it's supposed to be triggered

In my code, there is a method called componentDidMount that triggers the fetchUser() function. I am currently working on testing the componentDidMount method. Here is the Component Code: static propTypes = { match: PropTypes.shape({ isExact: Pr ...

javascriptreactjsunit-testingjestjsenzyme

Triggered by each user interaction, the callback function is activated

I need to add a timeout feature to my AngularJS web application. Each time a user interacts with the site, a timer is set for 10 minutes. Once this timer runs out on the client-side, a request is sent to the server signaling a timeout. What is the best wa ...

javascriptangularjsweb

How to create a clickable link that functions as a file upload button

I am working on a project where I need to create a link that acts as a file input when clicked. Here is the code for the link: <a id="upload-file">Upload your photo</a> Is there a way to make this link function as a browse file input? Any ...

javascriptjqueryhtmlcss