箭头函数改变定时器中的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.87841653400005, 30.95679870500004, 0.0,
                    10.0, 118.87826541800007, 30.95680770900003, 0.0,
                    20.0, 118.8774481050001, 30.956860625000047, 0.0,
                    30.0, 118.87660414600009, 30.956910105000077, 0.0,
                    40.0, 118.8759846580001, 30.95694296000005, 0.0,
                    50.0, 118.87542502500003, 30.956978761000073, 0.0,
                    60.0, 118.87473380100005, 30.957024103000037, 0.0
                ]
            },
            "point" : {
                "color" : {
                    "rgba" : [255, 255, 255, 128]
                },
                "outlineColor" : {
                    "rgba" : [255, 0, 0, 128]
                },
                "outlineWidth" : 3,
                "pixelSize" : 15
            }
    }];
    var dataSourcePromise;
    var i = 30.957024;
    var j = 30.956798;
    var a = 60;
    setInterval(function() { 
        i += 0.0001;
        j -= 0.0001;
        a += 10;
        czml1[1].position.cartographicDegrees.push(a, 118.8747338, 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.8747338, 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.8747338, i, 0); //路径最后添加节点 
    czml1[0].clock.currentTime = this.viewer.clock.currentTime.toString(); //获取当前时间 修改当前时间
    this.viewer.entities.removeAll(); //清空之前数据 避免数据堆积
    this.viewer.dataSources.add(Cesium.CzmlDataSource.load(czml1)); //重新添加修改后的数据
}, 1000);