setTimeout和$nextTick在实际项目中的区别

来源:blog.csdn.net 更新时间:2023-05-25 21:55

最近做的大数据可视化需要通过切换城市,地图根据城市进行更新,按理说更新百度地图center的中心点经纬度即可,但是切换城市之后直接给center赋值,地图没有更新,可能是因为地图渲染慢的问题,我想应该要渲染完成后在赋值应该是可以的,于是想到了通过$nextTick再给center赋值

this.$nextTick(() => {

 this.center = this.$store.state.city.location;

});

这种方式的结果是还是不会马上更新,但是在页面比如敲以空格等重新保存一下页面,即再一次更新dom时才会更新,我觉得有点奇怪了,于是上网查了一下,官方说

nextTick:将回调延迟到下次DOM更新循环之后执行,实际以成都市大数据可视化中心为例,默认成都市,比如切换成长沙市,地图还是为成都市,再次切换城市为石家庄市,地图现在市长沙市的,总是会慢一步,这就是他执行回调时间的问题

最后我换成了setTimeout就可以了,给地图中心点center赋新值,地图会立即更新:

this.timeout = setTimeout(() => {

     this.center = this.$store.state.city.location;

}, 300);

setTimeout:将回调延迟到指定时间之后执行

nextTick和setTimeout两者回调执行的前提条件不相同