vue 使用两个setInterval 出现混乱

Question

现在的业务需求是：1. 定时刷新页面，因为数据库数据可能会更新 2. 页面滚动展示，只展示6条数据 

我的思路是：1. 设置第一个定时器自动刷新页面 2. 设置第二个定时器改变列表数据，移走前六条加到列表末尾，每次只展示前六条

created() {
        this.getData();
        this.play();
    },
    methods: {
        getData() {
            // 取数据
        },
        play() {
            setInterval(this.getData, 7000);
            setInterval(this.change, 3000);
        },
        change() {
            if(this.dataList.length > 6){
                for (let i=0; i<6; i++){
                    this.dataList.push(this.dataList[i])
                    this.dataList.shift()
                }
            }
        }
    }

但是会混乱，就是getData根本不是用的7s，而是3s
请问该如何解决呢，谢谢！

 

补充问题：这样的模式是因为这个页面是要用作投影的，就是几乎不会有用户去自动刷新……

也就是说现在的流程是：打开页面，展示第一波六条数据、再展示下一波的六条数据，所以我需要动态展示六条数据，ok过一会儿刷新刷新数据库，因为数据库会有新增，这个时间肯定会等待得长一点

Answer 1

获取数据7s是肯定没错的，混乱是因为你的change有问题。你的代码是shit移除第一个后，第二个跑第一位，而你的i++又操作下一个了，导致原来2,4,6,8这种位置的数据被删除了，而使用下一个位置的数据替换，多次执行后会导致出现重复的数据

 

要轮流显示应该每次都是操作第一个数据项，因为shift后下一个数据跑第一位了

            if(this.dataList.length > 6){
                for (let i=0; i<6; i++){
                    this.dataList.push(this.dataList.shift())//可以直接合并为一句就行，shift会返回第一个元素，直接压如最后                    
                }
            }