Refreshing AngularJs screens via polling

I have a list of devices that require regular updates to monitor their display. I've set the poll interval to 15,000ms. However, every time the list is updated, there is a quick flicker and the user is taken back to the top of the list. Is there a way to prevent this behavior while still polling the devices?

Poller:

 let deviceCurrentRequestsFormatter = function (value: any, row: any, index: number) {
                let __this = this;
                let requests = $tcore.utilityTIS.filterBySiteIdIntId(_this.deviceCurrentRequestsList, row.SiteId, row.IntId);
                if (requests && requests.length) {
                    let sources = _.find(requests, function (request) {
                        return request.SourceType === __this.field;
                    });
                    if (sources && sources.Enabled)
                        return "<i class=\"fa fa-check tc-check-color\"></i>";
                }
                return "";
            };

            this.pollInterval = setInterval(function () {
                _this.getDeviceBrowserList();
                console.log("%c This is polling: ", "background: red; color: yellow; font-size: x-large")
            }, 15000);


            setTimeout(function () {
                _this.getDeviceBrowserList();
            }, 1000);
        }

What the poll is looking at:

 private getDeviceBrowserList() {
            let _this = this;
            this.widgetObject.parentEntity.getDeviceBrowserList().then(function (message: any) {
                if (message) {
                    _this.deviceBrowserList = message.Device;
                    _this.deviceTypeList = message.DeviceType;
                    _this.deviceCurrentRequestsList = message.DeviceCurrentRequests;

                    if (_.isUndefined(_this.pageSize)) {
                        _this.pageSize = 10;
                    }

                    _this.checkPrivilegeAccess(0, _this.pageSize).then(function() {
                        _this.buildDeviceBrowserListTable(message.Device, message.DeviceType, message.DeviceCurrentRequests);

                        _this.widgetObject.parentEntity.getFonts().then(function (data: any) {
                            $tcore.utilityTCS.showOrHideProgres(false);
                        });
                    });
                }
            });
        }

Answer №1

It's unclear what type of DOM rendering you're dealing with in this scenario, so:

  1. If you're utilizing an ngRepeat directive, consider using track by (https://docs.angularjs.org/api/ng/directive/ngRepeat#tracking-and-duplicates) to avoid unnecessary element creation and removal.

  2. If the buildDeviceBrowserListTable function generates the HTML on its own, make sure it updates existing elements instead of recreating them - essentially modifying their content without deleting and recreating elements.

Implementing these two solutions should resolve the flickering and scrolling issues

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

The process of deleting a specific element from an array using jQuery's function extension does not function correctly in a reference-based manner

After writing a custom jQuery extension script to remove a specified element from an array, I realized it was not functioning as expected. I am now trying to determine how to manipulate references without using the return reference method. $.fn.removeElem ...

What is the best way to auto-fill input fields with data from a Json file

My goal is to automatically populate HTML form fields based on user selection. I have obtained code for related functions, such as fetching JSON data and creating dropdown lists, from a friend. Here is the link to that code: https://jsfiddle.net/r4zuy7tn/1 ...

Prevent onlick actions until JavaScript function has completed

I run a dynamic quiz website using PHP, JavaScript, and MySQL. The quiz consists of multiple choice questions with answer options displayed on four buttons. <input type = "button" value="$alt1" onClick="changeQuestion('alternative1'); this.st ...

What is the best way to create a fresh revision with every build in Vue.js?

Currently, I am utilizing vue cli along with pwa (workbox). Upon building the project, Vue automatically generates a file called: precache-manifest.882c44d211b70f8989278935.js. Within this file, there are entries for revision and url: { "revision": ...

Deactivate additional fields when choosing an option from the drop-down selection menu

When designing a form with a select dropdown that displays various options, I encountered an issue. I want to disable certain fields if a specific option is chosen from the dropdown. For instance, if "Within Company" is selected in the transaction type, I ...

Matching a regular expression pattern at the beginning of a line for grouping strings

One of my tasks involves working with a markdown string that looks like this: var str = " # Title here Some body of text ## A subtitle ##There may be no space after the title hashtags Another body of text with a Twitter #hashtag in it"; My goal ...

How about diving into some JavaScript practice?

As I embark on my journey to teach myself JS with the help of a less-than-stellar textbook, I find myself stumped by a challenge that requires deciphering the purpose of this code: function clunk (times) { var num = times; while (num > 0) { ...

Dynamically getting HTML and appending it to the body in AngularJS with MVC, allows for seamless binding to a

As someone transitioning from a jQuery background to learning AngularJS, I am facing challenges with what should be simple tasks. The particular issue I am struggling with involves dynamically adding HTML and binding it to a controller in a way that suits ...

Adapt to screen size changes by transforming a single row into two separate rows

I am trying to create a two-column row with inputs: <div class="row first-row"> <div class="column col-6"> <div class="form-group"> <label for="usr" >Se ...

What steps should be taken to modify it so that the user is prompted to input the time in minutes

I attempted to modify the user input in minutes by changing "remseconds" to remminutes and adjusting the calculations to "x 60", but unfortunately, nothing happened as expected. Instead of "remseconds," I tried using remminutes and multiplied it by 60, bu ...

invoking a function each time the slider is interacted with

I have a slider implemented in my code. When the slider is clicked, it should trigger a function called myFunction() which displays an alert message saying "clicked". Below is the code I have written, but it is not functioning as expected. <html> & ...

Determining the Right Version of a Framework in npm: A Guide

One common issue I encounter is the uncertainty of which versions of npm, Ionic, and other tools I should have installed. It often goes like this: "Oh, there's a new version of the Ionic CLI out. Let's update." I install CLI v3.9.0. ...

What is the best way to define a TypeScript type for a default export JavaScript class static factory method?

I'm in the process of developing a vanilla JavaScript library and have a JS class that looks like this: class MyClass { static create() { return new MyClass(); } doOneThing() { // ... return this; } doOtherThing() { // .. ...

Tips for implementing nested module styles in Ant Design - A step-by-step guide

I am currently using an antd component <Tabs destroyInactiveTabPane defaultActiveKey="1" items={items} className={styles.tabs} /> Additionally, I have a .scss module file for styling .tabs { flex-grow: 1; padding: 0 16px; . ...

Arranging table columns in Angular 2

Having trouble organizing the columns of my table using Angular 2 The transform code for the pipe is as follows: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'orderBy' }) export class OrderByPipe implements Pipe ...

Using Fabric.js to manage image controls situated beneath another overlay image

I'm currently working on a canvas user interface using jquery and the fabric.js library. I managed to add an overlay png image with transparency by implementing the code below: var bgImgSrc = bgImg.attr('src'); canvas.setOverlayImage(bgImgS ...

How can you optimize the storage of keys in JS objects?

Just pondering over this scenario: Consider a line definition like the one below, where start and end are both points. let ln = { s: {x:0, y:0}, e: {x:0, y:0}, o: 'vertical' } Now imagine having a vast array of lines, how can we sav ...

"Performing a series of getJSON requests with a delay between each call, iterating through an array

Could someone shed light on why my jQuery/JavaScript code runs with an unexpected flurry of ajax calls instead of at a steady 1-per-second rhythm? var i = 0, l = data.length; function geocode() { $.getJSON( 'https://maps.googleapis.com/maps/api ...

It appears that the jQuery $.get and $.post methods are not functioning as expected

Hey everyone, I'm facing an issue with two PHP session variables that I need to clear on click. I've attempted using both $.get and $.post AJAX methods to trigger an external PHP script that should reset the values of these session variables. How ...

What is the process for animating elements on the Mountain Dew website?

After searching extensively, I was unable to locate a JavaScript library that can animate elements in a similar manner as demonstrated here. Take a moment to explore the website beyond the introduction, experiment with applying different filters from the t ...