将 jQuery Deferred Promise 转换为 Native JavaScript Promise？

Question

我从库中提取了下面这段 JavaScript 代码，它使用了与官方 Promise 规范不同的 jQuerys Deferred/promises。

如果能简单地将这个基本示例转换为原生 JavaScript Promise，同时保持以下相同的格式/结构，我将不胜感激。

我在网上找到的几乎每个 Promise 用法示例都是异步加载某些内容，我在某些情况下想将它们用于其他任务，而这个示例就是这样做的！

• App.show() 被调用
• App.show() 调用返回 Promise App.Animations.swipe.apply(this, [current, next, dir]).then(finalize); 的函数
• promise 函数内部有一个事件处理函数，当 CSS 动画完成并触发 Promise 解析时运行。
• 当 Promise 解决后，它会调用 finalize 函数内部的 App.show() 函数。

看下面的例子可能更容易理解它的作用......

var App = {

  show: function(index, direction) {
    var $this = this;

    // called after Promise is resolved with .then(finalize)
    finalize = function() {
      // other code here ran now after promise resolved from App.Animations.swipe()....
    };

    // call function which returns a Promise
    Animations.swipe.apply(this, [current, next, dir]).then(finalize);
  },


  Animations = {

    'none': function() {
      var d = UI.$.Deferred();
      d.resolve();
      return d.promise();
    },

    // function returns a Promise which has an event handler inside it that resolves the promise
    'swipe': function(current, next, dir) {

      var d = UI.$.Deferred();

      next.css('animation-duration', this.options.duration + 'ms');

      // Event handler ran one time when CSS Animation ends and triggers the event
      // this event is what resolves the promise
      next.css('opacity', 1).one(UI.support.animation.end, function() {

        current.removeClass(dir === -1 ? 'uk-slideshow-swipe-backward-out' : 'uk-slideshow-swipe-forward-out');
        next.css('opacity', '').removeClass(dir === -1 ? 'uk-slideshow-swipe-backward-in' : 'uk-slideshow-swipe-forward-in');
        d.resolve();

      }.bind(this));

      // return a Promise Object when this function is called
      return d.promise();
    },
  }
};

---

那么基于该代码如何将其转换为不使用 jQuerys Deferred 并使用 Native JS Promises？

Answer 1

'none': function() {
  var d = UI.$.Deferred();
  d.resolve();
  return d.promise();
},

这个很简单

'none': function() {
    return Promise.resolve();
},

现在滑动：

'swipe': function(current, next, dir) {
  return new Promise(function(resolve, reject) {
    next.css('animation-duration', this.options.duration + 'ms');

    // Event handler ran one time when CSS Animation ends and triggers the event
    // this event is what resolves the promise
    next.css('opacity', 1).one(UI.support.animation.end, function() {

      current.removeClass(dir === -1 ? 'uk-slideshow-swipe-backward-out' : 'uk-slideshow-swipe-forward-out');
      next.css('opacity', '').removeClass(dir === -1 ? 'uk-slideshow-swipe-backward-in' : 'uk-slideshow-swipe-forward-in');
      resolve();

    }.bind(this));
},

我只想补充一点，jQuery Promises（或者他们称之为 Deferreds）在某个阶段被破坏了，但这些天我认为它们符合 Promise/A+ 规范。

许多jQuery函数（例如ajax，动画）返回一个promise，或者你可以返回.promise() - 这否定了我在答案中所做的需要，那就是使用promise构造函数反模式.

我不太确定你的代码是否知道这些 jQuery 方法是否可以返回一个承诺