将 jQuery 延迟 Promise 转换为原生 JavaScript Promise？

Question

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

如果能简单地将这个基本示例转换为本机 JavaScript Promise，同时保持下面相同的 format/structure，我将不胜感激。

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

App.show()被称为
App.show() 调用一个函数 returns a Promise App.Animations.swipe.apply(this, [current, next, dir]).then(finalize);
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();
    },
  }
};

那么基于该代码如何将其转换为不使用 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));
},

I just want to add that jQuery Promises (or Deferreds as they call them) were at one stage kind of broken, but these days I think they are compliant with Promise/A+ spec.

Many jQuery functions (ajax, animations for example) return a promise, or you can return .promise() - which negates the need for what I've done in the answer, and that is to use a promise constructor anti-pattern.

I'm not sure enough about your code to know if any of those jQuery methods can return a promise or not

将 jQuery 延迟 Promise 转换为原生 JavaScript Promise？

Converting a jQuery Deferred Promise to a Native JavaScript Promise?

javascript

jquery

promise

jquery-deferred