AngularJS进阶(三十四)Angular数据更新不及时问题探讨_angularjs 数据不能及时同步

2401_84616838

于 2024-05-15 19:40:52 发布

阅读量308

点赞数 5

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84616838/article/details/138920879

版权

程序员专栏收录该内容

106 篇文章 0 订阅

订阅专栏

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

在这里插入图片描述

其中 $roo tS co p e . m y ba d g e 为相应角标变量。其值来自于全局变量$ rootScope.medNoticeBadge_Sunny，而这个变量又来自于下面的方法体:

/*
 * 已响应查询找药小红点
 */
$rootScope.updateMedNoticeBadge = function(num) {
console.log(num);
$rootScope.medNoticeBadge = 0;
if (localStorage.getItem('medNoticeBadge')) {
$rootScope.medNoticeBadge = Number(localStorage.getItem('medNoticeBadge'));
$rootScope.medNoticeBadge += num;
} else {
$rootScope.medNoticeBadge += num;
}
localStorage.setItem('medNoticeBadge', $rootScope.medNoticeBadge);
$rootScope.medNoticeBadge_Sunny = localStorage.getItem('medNoticeBadge');
$rootScope.medNoticeBadge = localStorage.getItem('medNoticeBadge');
if (!$rootScope.userinfo.logined) {
localStorage.removeItem('medNoticeBadge');
$rootScope.medNoticeBadge = 0;
}
}

以上方法体又是通过如下语句调用的:

/*
 *初次查询找药状况查询信息(只调用一次)
 */
$rootScope.getmedNoticeBadge = function() {
if (localStorage.logined == '1') {
var data = {
'stat': "1"
};
appCallServer($http, "9015", data, function(data) {
localStorage.setItem('medNoticeBadge', 0);
$rootScope.updateMedNoticeBadge(data.cnt);
}, function(data) {
console.log("9015_找药状况:" + data.errtext);
});
}
};
$rootScope.getmedNoticeBadge();

执行时出现了变量更新不及时的错误现象。导致角标显示异常。

通过阅读以上代码，发现变量均是通过rootScope传递的。为此自己通过延时执行角标变化的方法体。但这并不是一个良好的的项目组织层次。自己应该将控制角标变化的方法体封装成服务的形式，利用其单例特性解决数据不一致的情况。

自己尝试利用Factory单例特性创建服务，但是结果错误。代码如下:

myCtrl.factory('mybadgeService',function($http){
var mybadgeFactory = {};
mybadgeFactory.runMybadgeRequest = function(){
if (localStorage.logined == '1') {
var data = {
'stat': "1"
};
appCallServer($http, "9015", data, function(data) {
console.log("9015_找药状况-查询成功:" + JSON.stringify(data));
return data.cnt;
}, function(data) {
console.log("9015_找药状况:" + data.errtext);
return 0;
});
}
}
return mybadgeFactory;
});