for循环嵌套setTimeout遇到问题的处理心得

export default {
    data() {
        return {
            dialogList: []
        }
    },
    created() {
        this.setList()
    },
    methods: {
        setList() {
            const data = [{
                text: '第一条text'
            },
            {
                text: '第二条text'
            },
            {
                text: '第三条text'
            }]
            for (let index in data) {
                let option = {}
                option.index = index
                option.text = data[index].text
                setTimeout(() => {
                    // 我们首先想到的是方法1,然而,当data的length值较大时,悲剧发生,我们的 for循环与setTimeout不同步了,for优先完成
                    // 这就导致了异常,this.dialogList不是每秒间隔递增的, 虽然能console出来,但是实际使用时长度会出现异常,无法读取渲染
                    // 方法1
                    // this.dialogList[index] = option
                    // 不要慌,把它用一个方法代替就好了,然后把值push进去,解决
                    // 方法2
                    this.setOption(option)
                }, index * 1000)
            }
        },
        setOption(option) {
            this.dialogList.push(option)
        }
    }
}