工作日常--记录今天提交了N次代码然后最后还是请教前端老大解决的一个自己觉得很傻逼的问题

背景

这家公司是创业公司，公司做自己的产品。我是主要负责在SaaS系统PC端的新需求叠加与bug修复的。由于系统过于厚重，用的是angular1，具体哪个版本我不想去找了。反正在开发中遇到了不少次的双向绑定数组不更新的情况。

这次遇到一个这样子的需求–我们有一个socket.I.O的连接。与后台交互显示报表任务是否下载完成，是否有客人预约，还有一些其他的提示信息。在后台给到数据之后，我们通过socket.I.O来将数据获取到。然后呈现在页面上。数据直接返回，然后呈现在系统中之后。有客户反应，在开单的时候有时候预约信息过多，或者是其他人在使用该登陆人的账号正在导出报表，会出现页面上全部是弹出的消息框。于是就要做出一个处理，将所有的弹出框做出显示之后5秒之后自动消失。

因为是维护系统的这个模块的相关功能，于是我就写了一个setTimeout方法来解决这个问题。最开始的写法不太正确，但是基本实现了这个功能。在有消息弹出的时候，会在出现5秒之后自动消失。我在本地测试的时候，其实隐约发现有这个问题。就是在我用原生的setTimeout方法中写给比如我当时那个数组变量名称是vm.noticeList每隔5秒钟去除一个对象数组的时候。有时候会出现，调试debug看到数组长度已经为0的情况下，页面上还会出现有没有被删除的数组对象。代码如下。

// 代码1 运行一段时间会报错的代码
if(vm.noticeList.length > 0){
// var tempNotice = angular.copy(vm.noticeList);
angular.forEach(vm.noticeList,function(item,index){
steTimeout(function(){
        vm.noticeList.splice(index,1);
        },5000)
    } ) ;   
}


----------


// 代码2 不会报错但那时逻辑有问题的代码
if(vm.noticeList.length > 0){
 var tempNotice = angular.copy(vm.noticeList);
angular.forEach(tempNotice ,function(item,index){
steTimeout(function(){
        vm.noticeList.splice(index,1);
        },5000)
    } ) ;   
}

知道今天下午四点多我完成最终的代码，线上的代码其实还是代码1的结构。这个代码看起来并没有什么问题。其实有很大的问题，因为ng的变量是动态双向绑定的。导致你在每次angular.forEach遍历这个数组的时候，就会改变这个数组的实时的长度。那么在删除最后一个数组元素的时候会出现找不到而报错。

代码2中虽然没有什么问题，但是这种做法很是鸡肋。但是还是用angular的watch方法去监听vm.noticeList数组，反正从我使用ng的监听函数以来，觉得能用其他事件触发执行的话就不要用watch方法来处理。

后来解决的方法是，在每一次将数据unshift到vm.noticeList中之后，就去使用setTimeout去删除一个数组的元素。需要注意的是找到删除的索引。需要用到indexOf()去查找当前插入数组元素的索引。需要根据内容来确定索引然后删除相关的数据，而不是去直接每次删除固定的索引数组元素。因为你每次删除数组之后数组的索引就会发生变化。这点非常重要。

大概实现的代码如下。

function noticeList(msg){
 vm.noticeList.unshift(msg);
 setTimeout(function(){
     var index = vm.noticeList.indexOf(msg);
     if(index != -1){
     vm.noticeList.splice(index,1);
    }
    },5000)
}

如上的方法在数据来的时候，调用即可。

这样子还没有完全解决，因为我们的测试环境服务器的问题。导致我们的测试服务器的socket.I.O总是不返回数据，所以总是在预生产环境发布。然后今天测试都要被我烦死了。。。这里表示对测试深深的歉意。

在这段代码上传生产环境之后，我记得我的前端标签都打到了v2.4.8.1-hotFix-5了。又出现了一个问题，那就是，，，，我在用setTimeout方法明明删除了数组里的所有数组元素之后。页面上数组并没有实时更新。WTF！！！,遇见这个angular数组不即时更新的问题也不是一两次了。但是这里也是无解了，于是乎就去请教了前端老大。了解到在angular中庸$timeout试试，结果我就用这个函数试试。。。。。。尼玛真的成功了。

对于angular数据不更新的问题，我也不是第一次遇见了。之前写数据模块的时候，处理大量的数据的时候。数组直接赋值不能清空原始数组并将新的数组数据更新到数组中。代码如下

var originArray = [{},{}]  // 若干个对象
var newArray = [{},{}] // 新的数据源
originArray = newArray; 

以上originArray无法正常更新，解决方法。

var originArray = [{},{}]  // 若干个对象
var newArray = [{},{}] // 新的数据源
newArray.splice(0,newArray.length);
for(var i = 0;i < newArray.length;i++ ){
  newArray.push(newArray[i]);
}

对于这个数组不更新的情况，我也不知道为什么。