VUE中利用setTimeout写循环播放效果

产品的需求：一个音频对象数组，用户点击播放，从第一个开始每个播放一次循环，点击停止时停止循环播放。

不多废话直接上代码

        // 从选中单词开始循环播放音频  查询store值 为0从1开始  循环中定时调用子组件方法
        audioOn(flag){
        	// 播放与停止播放按钮切换显示的控制器  可忽略
            this.clickShow = !this.clickShow
            // 这里利用vuex来记录当前数组中播放到了哪一位的次序(含页面效果需求)
            let checkedBlockIndex = this.$store.state.vocabulary.checkedBlockIndex;
            // 处理序号
            checkedBlockIndex===0?null:checkedBlockIndex-=1;
            // 若是点击播放
            if(flag){
            	// 每一个音频播放所需等待的时间变量
                let timeSum = 0;
                // $refs.wordcard.length就是数组长度 结合页面展示效果获取 可忽略
                for(let i=checkedBlockIndex;i<this.$refs.wordcard.length;i++){
                    for(let j=0;j<3;j++){
                    // 每个播放三遍 每次时间timeSum递增 执行后setTimeout函数依次注册在JS宏任务队列中
                        this.timer= setTimeout(() => {
                            this.$refs.wordcard[i].contentBlockClick()
                        }, timeSum);
                        timeSum+=2000;
                    }
                }
            } else { // 若是点击停止播放  无论当前执行到哪一个setTimeout函数  全部注销即可
                for(let j=0;j<this.timeout;j++){
                    clearTimeout(j);
                }
            }
        },

要点：
设置定时器1000ms后，定时器里的函数会被加入到宏任务队列里，并执行。
此时，设置的只执行一次的定时器已经生效过了，清除定时器没有意义。
timer的值为定时器的 序号，清除定时器要在定时器触发前调用才有意义。