Maximum call stack size exceeded when an animation still working without map instance

[six-ponies]

I had an LineString animation with 5 seconds to show, but before that ends, I removed the map instance, and it results a maximun call stack size exceeded error, here is my code

var map = new maptalks.Map('map', {
  center: [-0.113049, 51.498568],
  zoom: 14,
  baseLayer: new maptalks.TileLayer('base', {
    urlTemplate: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
    subdomains: ['a','b','c','d'],
    attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
  })
});

var line = new maptalks.LineString([
  [-0.131049, 51.498568],
  [-0.107049, 51.498568],
  [-0.107049, 51.491568]
], {
  visible : false,
  arrowStyle : 'classic',
  arrowPlacement : 'vertex-last',
  symbol: {
    'lineColor' : '#1bbc9b',
    'lineWidth' : 6
  }
});

new maptalks.VectorLayer('vector', line).addTo(map);

replay();
setTimeout(function() {
        // add this line will work fine
        // line._showPlayer.finish();
  	line.hide();
  	line.remove();
		map.remove();
},1000)
function replay() {
  line.hide();
  //line's animateShow
  line.animateShow({
    duration : 5000,
    easing : 'out'
  }, function (frame) {
    if (frame.state.playState === 'finished') {
      console.log('finished');
    }
  });
}

if you add line._showPlayer.finish(), this code will work fine, but this is not a official solution since line._showPlayer is an inner API.

Here is a reproduction in jsfiddle

Hope to see your reply!

[fuzhenn]

Thanks!

I forgot to confirm the player's state when stopping the animation, which leads to the inifinite loops.

Fixed in the above commit and add a test case to ensure it won't happen again.

Thanks again.