我从库中提取了下面的 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?
最佳答案
'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 。
关于javascript - 将 jQuery 延迟 Promise 转换为原生 JavaScript Promise,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41608254/