时间戳

首页 > 解决方案 > 来自弹出窗口的异步 onClick 事件返回值

javascript - 来自弹出窗口的异步 onClick 事件返回值

问题描述

EDIT2：我解决了这个问题，因为我怀疑我的整个方法是错误的。我通过使用 jQuery 创建第二个单独的事件来做到这一点，并在单击完成按钮时触发它

$(selector).click(() => {
    Numpad.activate(document.getElementById(element));
});

$(selector).on("val-updated", (event, data) => {
    SendData(name, data)
});

和完成功能：

done: () => {
    $(selector).trigger("val-updated", val);
}

编辑：我的整个方法似乎是错误的，因为 done() 方法都附加到激活小键盘的按钮和完成按钮本身，但完成按钮本身不在打开小键盘的按钮的 onclick 事件中. done 事件将输入值设置为变量 Numpad.val，有没有办法仅在填充 Numpad.val 时从我的 .click 函数中运行第二行代码？有没有办法添加某种触发器来做到这一点？喜欢：

$("#someIdSelector").click(async () => {
    // This should execute as soon as the button is clicked and it does
    Numpad.activate(document.getElementById("#someIdSelector"));

    // This should execute only after Numpad.val gets a new value
    // which happens when the person clicks on the done button
    // and that runs the Numpad.done() function, which sets the value of Numpad.val
    SendData(name, Numpad.val);
});

我有一个基本上是数字键盘的弹出窗口，用户在其中输入一些数字并且它有一个“完成”按钮。

我有两个关于弹出窗口的功能（关于我的问题），我有一个激活功能和完成功能。

然后我有第三个函数将 onClick 代码附加到按钮，它处理小键盘的激活，它还应该从小键盘接收值。问题是这些操作中的一个是即时的，另一个不是。代码看起来像这样：

小键盘的功能：

Numpad: {
    val: null,

    activate: () => {
      $("#btnTrigger").click();
    },

    done() {
      return new Promise((resolve, reject) => {
        Numpad.val = $("#easy-numpad-output").text();
        $("#btnTrigger").click();
        Numpad.clear();

        resolve(Numpad.val);
    });
}

在我的 onclick 函数中，这就是我猜测的问题所在：

$("#someIdSelector").click(async () => {
    // This should execute as soon as the button is clicked and it does
    Numpad.activate(document.getElementById("#someIdSelector"));

    // This should execute only when Numpad.done() is resolved (when the user pressed done on the numpad)
    SendData(name, await Numpad.done());
});

相反，当我单击一个按钮时，onclick 中的所有代码都会立即执行，当然此时 Numpad.done() 是未定义的。我也尝试使用 .then，但是只要我按下一个按钮，console.log("Inside promise resolve") 就会立即被调用：

$("#someIdSelector").click(async () => {
    // This should execute as soon as the button is clicked and it does
    Numpad.activate(document.getElementById("#someIdSelector"));

    // This should execute only when Numpad.done() is resolved (when the user pressed done on the numpad)        
    Numpad.done().then((data) => {
        console.log("Inside promise resolve");
        SendData(name, data);

    });
});

标签： javascriptasync-await

解决方案

当您将方法声明为时，一旦第一个被命中async，它就会隐式返回 a 。Promiseawait

您的done方法不包含任何await语句，因此它会立即返回Promise已解析的 a，其结果是您的 unresolved Promise。

如果您要Promise手动返回，请删除async关键字；这样，Promise当您await Numpad.done().

推荐阅读