Question

我有这段代码：

this.array = [];
initArrayClicked() {
    this.clearArr()
    .then(this.addOneToArray.bind(this))
    .then(this.addTwoToArray.bind(this));
}

我有按钮，当我点击它时，这个函数被调用，并且在这个chian promise this.array值的末尾是[1, 2]，那没关系。

当我快速点击按钮两次并且每次this.array每次都有不同的值（[1, 2, 1, 2]，[2, 1, 2]）时，问题就开始了。

我希望当我点击按钮时，我的最终结果将是[1, 2]并不重要我点击按钮的方式。我想问题是承诺的链条没有褪色，我从乞讨开始，这导致了不必要的结果。

我试图寻找解决方案，但我找不到。

提前致谢并抱歉我的英文！

Answer 1

您可以将click处理程序设置为null，直到Promise链完成，然后将click处理程序重新附加到元素

let handleClick = () => {
  button.onclick = null;
  this.array = [];
  this.clearArr()
  .then(this.addOneToArray.bind(this))
  .then(this.addTwoToArray.bind(this))
  .then(() => button.onclick = handleClick.bind(this /* set `this` here */))
}

button.onclick = handleClick.bind(this /* set `this` here */);

Answer 2

您已经说过要快速重复四次点击才会产生一对。为此，阻止重复调用initArrayClicked：

this.array = [];
this.arrayBusy = false;
initArrayClicked() {
    if (!this.arrayBusy) {
        this.arrayBusy = true;
        this.clearArr()
        .then(this.addOneToArray.bind(this))
        .then(this.addTwoToArray.bind(this))
        .catch(error => { /*...handle errors, don't throw new ones...*/ })
        .then(() => { this.arrayBusy = false; })
    }
}

请注意内联错误处理。对于要触发的最终then，catch不得抛出错误或返回拒绝的承诺。我假设你想这样做，因为你没有从函数中返回promise链，所以 else 都不能处理来自它的错误。如果不是这样的话，结构会有所不同。

触发链承诺

2 个答案: