javascript - 使用 angularjs 播放数据集

Question

我使用 angularjs 作为前端框架。我通过休息获取电话获取数据集。它包含数组中的坐标。需要做的是带有坐标的数组应该被迭代并且应该显示在 map 中。

一旦用户在 map 中点击播放，这些坐标就应该以至少 1 秒的间隔依次显示。

当用户点击播放按钮时，该按钮会自动转换为暂停按钮，它应该执行名称打算执行的操作。暂停该过程。我无法使用 angularjs 实现这种行为。以下是我能得到的最接近的结果。

  var getReplayData = function () {
        return $http.get('http://localhost:4000/replay/asiri/vin/' + from + '/' + to);
    };

    $scope.play = function () {

        from = rangeProperties.getFrom() * 1000;
        to = rangeProperties.getTo() * 1000;


        getReplayData().success(function (data) {
            console.log(data);

            var waitingTime = 0;
            var gap = 0;

            for (var i = 0; i < data.length; i++) {
                (function (i) {
                    var element = data[i];

                    var coordinates = new Object();
                    coordinates.latitude = element.LATITUDE;
                    coordinates.longitude = element.LONGITUDE;

                    setTimeout(function () {
                        broadcastData(coordinates);
                    }, waitingTime);

                    if (i + 1 < data.length) {
                        gap = data[i + 1].TIMESTAMP - element.TIMESTAMP;
                        console.log(gap);
                    } else {
                        gap = 0;
                    }

                    waitingTime = waitingTime + gap;
                })(i);
            }


        });

$scope.play 指的是按钮的播放 Action 。我不知道如何暂停这个过程。看来我可能必须保留对所有超时的引用并取消它们。知道如何实现这种场景吗？我并不完全需要代码段，只是知道如何解决此类问题就真的很好了。

Answer 1

Seems like I might have to keep the references to all timeouts and cancel them.

这将是良好的第一步。

I don't exactly need a code segment just an idea how to approach to solve this kinda of problem would be really nice

我会执行以下操作:

• 如果可能，将响应数据缓存为变量。
• 将播放和暂停功能分开，将它们绑定(bind)到使用 $interval 服务获得的可取消回调中。
• 在播放期间，将坐标数据视为 FIFO (queue) ，将传递给 $interval 的 Promise 的项目出队
• 在暂停期间，您只需取消 $interval promise
• 再次播放不需要对队列进行任何花哨的工作，因为当您恢复时，您将在队列中的第一个项目上恢复相同的逻辑。