fetchSomething() { this.$store.dispatch("fetchSomething").then(() => { this.$nextTick(() => { var rect = this.$refs.page.$el.getBoundingClientRect(); if (!this.isFetchEnd && (rect.top + rect.height) < document.documentElement.clientHeight) { this.fetchSomething(); } }) } } // store.js: fetchSomething({commit, state}) { if (state.isFetching) return; ... return fetch(url, data).then(()=>{...}).catch(()=>{...}) ... }
想要实现的功能是分页加载,页面滚动到底调用fetchSomething
请求下一页数据(绑定scroll事件的代码就没写出来了),以上代码要做的是在第一页数据请求完后,如果数据在屏幕上显示没有撑满一整屏就自动请求第二页数据。
但是用nextTick会导致死循环就一直在调用fetchSomething
,而如果换成setTimeout(f,0)就不会有死循环的现象,我觉得nextTick一定程度上跟setTimeout(f,0)是一回事啊,为什么nextTick会造成死循环呢,nextTick到底是怎么被触发的?
付费偷看金额在0.1-10元之间
$nextTick
是vue的DOM更新队列的下一个tick完成时触发,也是能够确保DOM更新完毕,其在环境不支持的时候其实就是setTimeout(f,0)
。vue文档关于为何会死循环。。我觉得lz可以在if的判断内再检查一下?
一周热门 更多>