[JavaScript知识库]闭包，垃圾回收，vue生命周期，设置定时器

上周，参与一个项目开发，其中有一个需求是，进度没有到达100%时，通过使用定时器，不断请求后端接口获取数据，当所用进度都达到100%时，销毁定时器，不在请求后端接口。在这个需求中使用到的前端技术有闭包，vue生命周期，定时器，垃圾回收机制。

 getTableData(page) {
                this.showLoading = true
                let params = {
                    taskNature: this.task_nature,
                    pageNo: page.page,
                    pageSize: page.limit,
                    taskName: this.task_name,
                    ofHistory: 0
                }
                return getTaskList('index', params).then(res => {
                    this.taskTimer = setInterval(() => {
                        getTaskList('index', params).then(timerRes => {
                            let countList =  (timerRes.data || []).filter(rItem=>rItem.progress_rate==100)
                            if(countList.length==timerRes.data.length){
                                clearInterval(this.taskTimer)
                                this.taskTimer = null
                            }
                            (timerRes.data || []).forEach(tItem => {
                                (res.data || []).forEach((item, index) => {
                                    if (item.id == tItem.id && item.progress_rate != tItem.progress_rate) {
                                        res.data[index].task_status = tItem.task_status
                                        res.data[index].progress_rate = tItem.progress_rate
                                    }
                                })

                            })

                        })
                    }, 2000)
                    if (this.showLoading) {
                        this.showLoading = false
                    }
                    return res
                })
            },

1.首先对于闭包的概念，简单来说就是，函数内嵌套函数，并且内部函数被当作返回值，通过这一处理，外部函数就可以获取到内部函数的变量了（正常情况下，由于函数都是有作用域的，每个函数构成一个独立的空间，各各函数内设置的局部变量是互不影响的）使用闭包就可以做到，外部函数对内部函数变量的引用。闭包有一个缺点就是被引用的变量无法销毁，会一直保存在内存当中，所以滥用闭包会导致内存的消耗。

2.在我所处理的业务中因为使用了定时器，会一直轮询接口，并且又使用了闭包，所以如果自己不手动销毁定时器地话，该定时器就会一直存在，并且一直调用接口，所以需要手动销毁，这里又要提到两个相关只是，vue的生命周期，以及垃圾回收机制。在vue中销毁定时器为什么是在beforeDestory中呢

 beforeDestroy() {
            clearInterval(this.taskTimer)
            this.taskTimer = null
        },

这里就要提到关于vue生命周期的概念了，因为在beforeDestory中，可以使用this获取到实例，

并且一般在这个生命周期函数中进行定时器，和dom事件的清除。

3.垃圾回收机制,

解决内存的泄露，垃圾回收机制会定期（周期性）找出那些不再用到的内存（变量），然后释放其内存。

现在各大浏览器通常采用的垃圾回收机制有两种方法：标记清除，引用计数。