如何延迟功能时的承诺

Question

我如何推迟一系列承诺？我需要这个,因为我想在继续编写脚本之前等待CSS动画完成.

该功能的目的是打开一个视图.如果视图尚未打开,则打开它(通过更改类),等待css动画,继续.如果视图已打开,则不执行任何操作并继续操作.

我想调用这样的函数:(它是一个角度控制器内的函数)

$scope.openView(viewId).then(function() {              
     $scope.openAnotherView(anotherViewId);
});


/** Function to open some view **/
$scope.openView = function (viewId) {
    function timeout(delay) {
        return new Promise(function(resolve, reject) {
            $timeout(resolve, delay);
        });
    }

    // Check if view is already open
    if ($scope.viewId != viewId) {
         $scope.viewId = viewId;             

         // get data from ajaxcall (also a promise)
         return MyService.getData(viewId).then(function(data) {
             // add data to view
             // change class to open view
             // this is working ok!
         }).then(function() { 
             return timeout(30000 /* some large number (testing purpose) */ )
         });
    } else {
         // view is already open, so return here we don't have to wait
         // return empty promise, with no timeout
         return new Promise(function(resolve, reject) {
             resolve()
         });     
    }
}

此代码有效,但延迟不起作用.我的方法好吗？我在这里错过了什么？

---

编辑1:使用@sdgluck的建议改进了代码

---

编辑2:对主要问题的一些澄清:

为了更清楚地阐明主要问题:我可以在我的代码中使用这种结构吗？

// code doesnt know wheter to wait or not
// can the Promise do this?
openView().then(function() {              
     openAnotherView();
}

结果1:

浏览器将调用,openView()但由于它已经打开,它将立即调用openAnotherView()(没有延迟).

结果2:

视图未打开,因此openView()将打开它,然后延迟(或者@Dominic Tobias指出,添加事件列表？)然后openAnotherView()在一段时间后调用.

谢谢你的帮助!

编辑3:添加了解释问题的小提琴 http://jsfiddle.net/C3TVg/60/

Answer 1

要延迟承诺,只需resolve在等待一段时间后调用该函数即可.

new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve();
  }, 3000); // Wait 3s then resolve.
});

与您的代码的问题是,你正在返回一个承诺,然后里面的then那个诺言,你要创建一个又一个和期待当初的诺言等待它的-恐怕这不是承诺是如何工作的.您必须在promise函数内完成所有等待,然后调用resolve:

编辑:这不是真的,你可以延迟任何承诺链then:

function promise1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('promise1');
      resolve();
    }, 1000);
  })
  .then(promise2);
}

function promise2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('promise2');
      resolve();
    }, 1000);
  });
}

function promise3() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('promise3');
      resolve();
    }, 1000);
  });
}

promise1()
  .then(promise3)
  .then(() => {
    console.log('...finished');
  })

然而,这不是等待css动画的好方法.最好听一下transitionend事件:

element.addEventListener('transitionend', onTransitionEnd);
element.classList.add('transition-me');

请注意,如果您使用的是animation而非transition的概念同样适用,但使用animationend事件.

Answer 2

我怎样才能延迟一连串的承诺？

$timeout返回一个承诺。返回将其链接起来的承诺。

$scope.openView = function (viewId) {
    // Check if view is already open
    if ($scope.viewId == viewId) {
        //chain right away with empty promise
        return $q.when();
    };

    //otherwise if view is not already open

    var p = MyService.getData(viewId).then(function(data) {
             // add data to view
             // change class to open view
             // this is working ok!
    });

    var pDelayed = p.then (function () {
         //return to chain delay
         return $timeout(angular.noop, 30000);
         });

    //return delayed promise for chaining
    return pDelayed;
};

$scope.openView(viewId).then(function() {
     //use chained promise            
     $scope.openAnotherView(anotherViewId);
});