Javascript 由滚动位置触发的Mapbox GL JS flyTo不总是工作

我正在尝试使用Mapbox GL JS创建一个地图，随着文本在屏幕上和屏幕下的移动而更新（包括位置、样式和过滤器）

如中所示，我创建了一个数组，其中包含要飞到的位置，其中“first”和“second”是我文本部分的ID

var locations = {
'first': {
    center: [145.7, -17.8],
    zoom: 4.2,
    speed: 0.5
},
'second': {
    center: [148, -17.8],
    zoom: 5,
    speed: 0.5
},
'third': {
    center: [148, -18],
    zoom: 5.5,
    speed: 0.5
}}

我正在使用library Waypoints.js触发滚动事件：

const $textSection = $('.text-section');

$(document).ready(function() {

    $textSection.each(function(){

        let _this = this;
        let sectionName = $(this).attr('id');

        var inViewBottom = new Waypoint({
            element: _this,
            handler: function (direction) {
                if (direction == 'down'){
                    map.flyTo(locations[sectionName]);
                    console.log(locations[sectionName]);
                    updateMap(sectionName);
                }
            },
            offset: '85%'
        });

});

除了航路点之外，还调用函数updateMap，该函数会触发对地图的其他更改：

function updateMap (sectionName) {

    if (sectionName == "first") {
        popup.addTo(map);
    } else {
        popup.remove();
    };

    if (sectionName == "first") {
        map.setPaintProperty('layer-1', 'line-opacity', 0.4);
    } else {
        map.setPaintProperty('layer-1', 'line-opacity', 0);
    };

    if (sectionName == "first") {
        map.setLayoutProperty('layer-2', 'visibility', 'none');
        $("#map-key").css("visibility", "hidden"); 
    } else {
        map.setLayoutProperty('layer-2', 'visibility', 'visible');
        $("#map-key").css("visibility", "visible"); 
    };

    if (sectionName == "second") {
        filterYear = ['==', ['number', ['get', 'Year']], 1998];
        map.setFilter("layer-2", filterYear);
    } else if (sectionName == "third") {
        filterYear = ['==', ['number', ['get', 'Year']], 2002];
        map.setFilter("layer-2", filterYear);
    }

} 

大约60%的时间此代码工作正常。但是在其余的时间里，当updateMap（）执行时，flyTo动画不起作用。我不知道为什么，因为航路点中的其他代码可以工作，并且console.log（）仍然使用位置数据生成对象

有趣的是，如果我将updateMap（）放在flyTo之前，flyTo动画根本不起作用，因此我想知道updateMap（）中调用的其他Mapbox GL方法是否会在某些时候干扰flyTo。我尝试使用setTimeout延迟调用updateMap（）的时间，但似乎没有帮助

任何建议都将不胜感激