箭头函数改变定时器中的this指向

此时viewer下的方法可以正常调用

mounted() { var viewer = new Cesium.Viewer('cesiumContainer'); var czml1 = [{ "id" : "document", "name" : "CZML Point - Time Dynamic", "version" : "1.0", "clock": { "interval": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z", "currentTime": "2012-08-04T16:00:00Z", "multiplier": 10 }, }, { "id" : "point", "availability" :"2012-08-04T16:00:00Z/2012-08-04T16:05:00Z", "position" : { "epoch" : "2012-08-04T16:00:00Z", "cartographicDegrees" : [ 0.0, 118.005, 30.004, 0.0, 10.0, 118.007, 30.003, 0.0, 20.0, 118.01, 30.0047, 0.0, 30.0, 118.009, 30.0077, 0.0, 40.0, 118.01, 30.005, 0.0, 50.0, 118.003, 30.0073, 0.0, 60.0, 118.005, 30.0037, 0.0 ] }, "point" : { "color" : { "rgba" : [255, 255, 255, 128] }, "outlineColor" : { "rgba" : [255, 0, 0, 128] }, "outlineWidth" : 3, "pixelSize" : 15 } }]; var dataSourcePromise; var i = 30.; var j = 30.; var a = 60; setInterval(function() { i += 0.0001; j -= 0.0001; a += 10; czml1[1].position.cartographicDegrees.push(a, 118., i, 0); //路径最后添加节点 czml1[0].clock.currentTime = viewer.clock.currentTime.toString(); //获取当前时间 修改当前时间 viewer.entities.removeAll(); //清空之前数据 避免数据堆积 viewer.dataSources.add(Cesium.CzmlDataSource.load(czml1)); //重新添加修改后的数据 }, 1000); dataSourcePromise = Cesium.CzmlDataSource.load(czml1); viewer.dataSources.add(dataSourcePromise); viewer.zoomTo(dataSourcePromise); },

在data中定义viewer后 setInterval中报错 this.viewer is undefined 这是因为定时器中的this指向了Window 但应该指向vue的实例

data() { return { viewer:"", color: 'rgba(03,194,58, 128)', color1: [103,194,58, 128], } }, setInterval(function() { i += 0.0001; j -= 0.0001; a += 10; czml1[1].position.cartographicDegrees.push(a, 118., i, 0); //路径最后添加节点 czml1[0].clock.currentTime = this.viewer.clock.currentTime.toString(); //获取当前时间 修改当前时间 this.viewer.entities.removeAll(); //清空之前数据 避免数据堆积 this.viewer.dataSources.add(Cesium.CzmlDataSource.load(czml1)); //重新添加修改后的数据 }, 1000);

 vue中使用定时器时this指向

使用setInterval时this指向的问题。如果我们直接this.timer = setInterval(function(){要触发的函数}) 是会报错的。因为这样的话this的指向为window，但是我们要触发的函数是挂载在vm实例上面的。所以这个时候就是箭头函数发挥用处的时候了。我们可以直接这样写this.timer = setInterval(() => {要触发的函数}).

setInterval(() => { i += 0.0001; j -= 0.0001; a += 10; czml1[1].position.cartographicDegrees.push(a, 118., i, 0); //路径最后添加节点 czml1[0].clock.currentTime = this.viewer.clock.currentTime.toString(); //获取当前时间 修改当前时间 this.viewer.entities.removeAll(); //清空之前数据 避免数据堆积 this.viewer.dataSources.add(Cesium.CzmlDataSource.load(czml1)); //重新添加修改后的数据 }, 1000);

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/haskellbc/11292.html