Question

我创建了一个函数来检查元素是否已经存在，如果不存在，请重复该函数：

function waitForElementToDisplay(selector) {
    return new Promise(function (resolve, reject) {
        if (document.querySelector(selector) != null) {
            console.log('Element is displayed now');
            resolve();
        } else {
            setTimeout(function () {
                waitForElementToDisplay(selector, 500);
            }, 500);
        }
    })
}

我在Shepherd.js的beforeShowPromise函数中使用了此函数。此功能让包裹等待下一个巡回步骤，直到诺言得以解决。 beforeShowPromise函数如下所示：

beforeShowPromise: function () {
    return new Promise(async function (resolve) {

        const selector = '.exampleTemplates';

        await waitForElementToDisplay(selector).then(() => {
            console.log('Do something');
        }).catch(err => {
            console.log(err);
        });
    })
},

我要等到waitForElementToDisplay函数被解析，以便可以解析Shepherd的功能。但是，正在调用.then和.catch函数。有人可以向我解释为什么它不起作用吗？

Answer 1

Promise仅在元素存在时解决。

如果没有，请点击else分支，该分支递归调用该函数。这会创建一个新承诺，但是当解决时，您从不做任何事情。最初的诺言搁置了。

您可以使用新的承诺来解决原始的承诺：

resolve( waitForElementToDisplay(selector) );

Answer 2

您需要将resolve传递给递归调用：

const checkIfElementExists = (resolve, selector) => {
  if (document.querySelector(selector) !== null) {
    console.log('Element is displayed now');
    resolve();
  } else {
    setTimeout(checkIfElementExists, 500, resolve, selector);
  }
};

function waitForElementToDisplay(selector) {
  return new Promise(function(resolve) {
    checkIfElementExists(resolve, selector);
  })
}

或者封装在waitForElementToDisplay内：

function waitForElementToDisplay(selector) {
  return new Promise(function(resolve) {
    (function checkIfElementExists() {
      if (document.querySelector(selector) !== null) {
        console.log('Element is displayed now');
        resolve();
      } else {
        setTimeout(checkIfElementExists, 500);
      }
    })();
  })
}

然后在返回承诺后不调用函数

2 个答案: