javascript - 将 jQuery 延迟 Promise 转换为原生 JavaScript Promise

Question

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

我想将这个基本示例转换为原生 JavaScript Promise，同时保持下面相同的格式/结构。

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

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

只需查看下面的示例，可能会更容易理解它的作用......

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();
    },
  }
};

<小时/>

那么基于该代码如何将其转换为不使用 jQuery 的 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 方法是否可以返回 promise 。