Question

我有一个设备列表，我需要定期更新，以查看它们正在显示的内容。因此，我将轮询间隔设置为15,000毫秒。每次更新列表时，列表都会快速闪烁，然后将我移回列表顶部。反正是否阻止它将用户移回列表顶部但仍然轮询设备？

轮询：

 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);
        }

民意调查的内容如下：

 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

我不确定你的dom渲染情况如何：

如果您正在使用ngRepeat指令，则可以使用track by（https://docs.angularjs.org/api/ng/directive/ngRepeat#tracking-and-duplicates）来防止不必要的创建和删除元素。
如果buildDeviceBrowserListTable自己构建html，则需要对其进行更改，以便更新元素（如果已存在） - 即更改其内容而不删除和重新创建元素。

这两个解决方案将修复闪烁和滚动

AngularJs屏幕刷新刷新

1 个答案: