JavaScript 中按钮按下回调和等待 Promise 之间是否会发生竞争条件？

Question

我有一个 html 格式的设置页面及其相应的 .js 文件。

设置页面有一个从后端获取的值列表，用户可以更改这些值。它的末尾还有一个

Apply

按钮。

如果用户单击

Apply

，则会调用

$("#settings").submit(...

回调，显示一个模式，为用户提供一些信息和

OK

按钮。用户可以关闭模式

X

或单击

OK

。

单击

OK

时，会调用回调 (a)

$("#OK-btn").on("click"...

，将布尔值

apply_changes

设置为 true（默认为 false）。

回到

$("#settings").submit(...

（显示模态后），它会创建一个

new Promise((resolve) => ...

，而 (b)

modal.addEventListener("click"...

会测试布尔值

apply_changes

。

我的问题；用户单击模式

OK

后，设置布尔值的回调 (a) 和测试布尔值的

Promise

回调 (b) 之间是否会发生竞争条件？

在测试过程中，我还没有看到任何竞争条件，但想知道后台发生了什么。

$("#settings").submit()... <displays> --->  Modal OK  ---> $("#OK-btn").on("click"... (a) set apply_changes
                  |                               ^
              <creates>                           |
                  |                               |
                  V                               |
new Promise((resolve) => eventListener("click")----
                         (b) test apply_changes

Answer 1

我在这里冒着一些声誉的风险......但我会赌一点......

简称...

“用户单击模式 OK 后，设置布尔值的回调 (a) 和测试布尔值的 Promise 回调 (b) 之间是否会出现竞争条件？”

是的！可以。怎么做呢？嗯...这是另一个问题。

但是，我想提醒一下，竞争是在 Promise 之间发生的异步事情。这就像“给我首先履行的承诺（一组）的结果”。

你的例子/解释/细节只指出了一个

Promise

。那么哪里需要比赛呢？

我猜你有一个提交事件处理程序来显示模式并设置承诺...那么你希望承诺等待模式上的“确定”按钮效果？如果是这样，你可以尝试这样的事情：

const form = document.querySelector('#myForm');
const modal = document.querySelector('#myModal');
const modalButton = modal.querySelector('#myOk');
const variable = document.querySelector('#myVar');

form.addEventListener('submit', submitEventListener);
modalButton.addEventListener('click', okEventListener);

function okEventListener ( event )
{
  variable.value =
  (
    (variable.value == 'true')
    ? 'false'
    : 'true'
  );
  
  modal.open = false;
  
  console.log('OK sets a new variable value:', variable.value);
  
  event.target.resolver(variable.value);
}

async function submitEventListener ( event )
{
  event.preventDefault();
  
  // Do ajax stuff here...
  
  let newPromise = new Promise
  (
    async ( resolve, reject ) =>
    {
      modalButton.resolver = value => resolve(value);
    }
  );
  
  modal.open = true;
  
  console.clear();
  console.log('Current variable value:', variable.value);
  
  // You can make any race here, including newPromise.
  
  // This will await for the user to click ok on the modal.
  await newPromise;
  
  // Then print something to the console...
  console.log("Awaited for the variable changed value:", variable.value);
}

dialog
{
  background-color: lightgray;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: 0 solid black;
}

<dialog id="myModal">
  <button id="myOk">OK</button>
</dialog>
<form method="dialog" action="about:blank" id="myForm">
  <label for="myVar">
    VARIABLE:
    <input type="text" id="myVar" name="myVar" value="true" disabled="disabled" />
  </label>
  <button id="openModal" type="submit">Open Modal</button>
</form>

PS.:由于问题中没有暴露代码，所以我凭自己的想象做了一个作为例子。