javascript - 将 Promise 添加到 DomOutline 事件处理程序

Question

我尝试调用的异步函数是由 DomOutline 的 onClick 属性定义的。对于此示例，domClickHandler 就像接收所选元素的回调。

    var iWantThis;

    var myDomOutline = DomOutline({
        onClick: domClickHandler,
        filter: false,
        stopOnClick: true,
        hideLabel: true
    });

    var domClickHandler = function(element){
        iWantThis = element
        console.log("I am the element you've selected: " + element);
    };

    myDomOutline.start();
    console.log("From the outside world: " + iWantThis);
    return iWantThis;

DomOutline.start() 立即返回，domClickHandler 是异步回调。因此，在此示例中，即使在我选择元素之前，最后一个 console.log 也将返回 undefined。我尝试过在包装 DomOutline.start() 的函数上尝试 $.when() 以返回 promise()，但它没有不要使异步调用同步。在这里使用 Promise 的方法是什么，以便我可以在选择 DOM 对象时返回它？

我 promise 了回调，但我不确定这将如何帮助我实现数组的同步返回iWantThis

var domClikcHandler= function(element){
        var dfd = $.Deferred();
        classifiedElements = __classifyChildrenElements(element);
        dfd.resolve(classifiedElements);
        dfd.then(function(e){
            console.log(e);
            iWanThis = e;
        });
        return dfd.promise()
    };

Answer 1

让我们一步一步地进行。

什么是 promise

promise 是值(value)概念的抽象 - 它代表值(value)+时间。您在队列上执行的操作将在时间到来时发生。

promise 一开始是待定，然后通过解决变成:

• 已实现 - 意味着它可供使用和链接。
• 拒绝 - 表示操作失败，您可以尝试从中恢复

在非 jQuery 库和 native Promise 中 - 转换过程以及处理程序的执行始终异步。这是为了防止在可能异步的情况下出现竞争情况。

promise 不是什么

Promise 不是事件发射器 - 您无法将 Promise 绑定(bind)到多次发生的事件，因为它代表单个值。代表多个值的对偶 promise 称为 Observable 。您无法将 promise 绑定(bind)到点击事件。

Promise 并不神奇 - 它通常用 JavaScript 实现，它不能将异步代码转换为同步代码，而它的 then 抽象了排序本身的概念 - 它如果没有语言支持，就无法在异步操作上“停止”代码，以便需要其他语言设施，例如生成器(ES6)或异步/等待(ES7)。对于大多数不想通过 a compile step 的浏览器用户Promise 可以让你的生活更轻松，但不能使异步代码同步。

一般来说，promise 使用返回值和抛出异常......返回值和抛出异常。 Promise 使用单个值解析一次，就像一个值只有一个值一样，一旦您获得它，它就不会改变。

如何使用 promise

在您的情况下，点击处理程序从根本上无法使用 promise 进行建模 - 它需要一个事件发射器(又名可观察)。 onBtnClick 看起来很好。

在 ready 事件的情况下 - 假设您 promisified it correctly (调用 $.when 本身没有帮助)您需要链接到它:

 myDomOutline.start().then(function(){
     alert("Ready!");
 });

如果你想从外部访问它，那没问题，因为 Promise 是这样写的:

function startWithData(){
     var request = $.ajax(...);
     return myDomOutline.start().then(function(){ // note the return
         startAnimations();
         doAnotherThing();
         return request; // return the request
     });
}

startWithData().then(function(data){
    // ajax done and ready event fired
    // access data here
});

作为补充阅读，请参阅 How to return the response from an AJAX call?这不是以 promise 为中心，但仍然非常相关。