是否可以从内部承诺中获取父函数的回调？

Question

Play with my JSfiddle

是否可以使用$timeout 承诺使scrollTo 可链接，如下所示？如果没有，我该如何编写 scrollTo，作为一个承诺，以便我可以使用 then 进行回调？

html：

<div ng-click=toTop()>click me</div>

js:

app.controller('MainCtrl', function($scope, $timeout) {
    $scope.toTop = function() {
        var bodyEl = angular.element(document.querySelector('#body'));
        scrollTo_(bodyEl[0], 0, 500);

    };


    function scrollTo_(element, to, duration) {
        if (duration <= 0) {
                        $timeout.cancel(forward);
            console.log('yoyo');
            return forward;
        }
        var difference = to - element.scrollTop;
        var perTick = difference / duration * 10;
        var forward = $timeout(function() {
            element.scrollTop = element.scrollTop + perTick;
            scrollTo_(element, to, duration - 10);
        }, 10, false);
    }
});

Answer 1

很难解释“使用 $timeout 承诺使 scrollTo 可链接，如下所示”，因为 scrollTo 不可链接。因此，让我们假设 scrollTo 将被设为“thenable”，方法是让它返回一个 $q 承诺。

有了这个假设，返回的 Promise 应该在滚动完成时解决，或者如果滚动在完成之前停止（通过另一个 scrollTo_() 调用）被拒绝，这似乎是合理的。

这里是：

var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $q) {
    var stopSignal = false;
    $scope.toTop = function() {
        var element = angular.element(document.querySelector('#body'))[0];
        stopSignal = true; // stop previous.
        scrollTo_(0, 500).then(function() { // Yay, scrollTo_() is thenable!
            console.log('scroll complete');
        }, function() {
            console.log('scroll stopped');
        });
        function scrollTo_(to, duration) {
            var startTime = null,
                startPos = element.scrollTop,
                dfrd = $q.defer();
            function step(timestamp) {
                if(stopSignal) {
                    // This block kills an animation that's in progress.
                    // It doesn't affect freshly initiated animations.
                    stopSignal = false; // reset the `stopSignal` flag.
                    dfrd.reject(); // reject the deferred, to indicate non-completion
                    return; // prevent further animation by returning early and killing the recursion.
                }
                if (!startTime) {
                    stopSignal = false;
                    startTime = timestamp;
                }
                var progress = timestamp - startTime;
                if (progress < duration) {
                    element.scrollTop = startPos + (to - startPos) * progress / duration; // linear movement w.r.t. time, though not necessarily at regular intervals.
                    window.requestAnimationFrame(step); // recurse
                } else {
                    element.scrollTop = to; // ensure final position is accurate
                    dfrd.resolve();
                }
            }
            // This is horribly messy but necessary(?) for the stop signal to take effect.
            window.requestAnimationFrame(function() {
                stopSignal = false;
                window.requestAnimationFrame(step);
            });
            return dfrd.promise;
        }
    };
});

DEMO 双击查看滚动效果在另一个开始之前停止。

如您所见，通过删除 $timeout 和 :

避免了 10 毫秒超时引起的间隔

• 利用window.requestAnimationFrame()，这是编排动画的现代方式（尽管目前浏览器兼容性是一个问题，尤其是 IE
• 从既定的基准时间开始在每一步工作，从而提供更好的运动线性保证。

不久之后每个人都应该以这种方式编写浏览器动画。

Answer 2

这就是我将如何完成递归承诺：

function scrollTo_(element, to, duration) {
    if(duration<=0) return Promise.resolve();
    var difference = to - element.scrollTop,
        perTick = difference / duration * 10;
    return $timeout(function() {
        element.scrollTop = element.scrollTop + perTick;
    }, 10, false).then(function(){
      duration -= 10;
      return scrollTo_(element, to, duration)
    });
}

编辑：

如果你想停止中间的超时，我想你可以这样做：

var scrollTopTimeoutFlag = true, scrollTopTimeout;
function scrollTo_(element, to, duration) {
    if(duration<=0 || !scrollTopTimeoutFlag){
      if(scrollTopTimeout)  return $timeout.cancel(scrollTopTimeout);
      return $q.when();   // $q.when == Promise.resolve
    } 
    var difference = to - element.scrollTop,
        perTick = difference / duration * 10;
    scrollTopTimeout = $timeout(function() {
        element.scrollTop = element.scrollTop + perTick;
    }, 10, false);
    return scrollTopTimeout.then(function(){
      duration -= 10;
      return scrollTo_(element, to, duration)
    });
}