如何让函数等待上一行代码完成

Question

我正在浏览器中编写一些自动化脚本。 我有一些步骤只有在设置超时时才有效：

function contactDetails(x) {
    document.querySelector("selector7").value=x;
    document.querySelector("selector8").dispatchEvent(new Event('change',{
        bubbles: true
    }));
    setTimeout(function() {
        document.querySelector("selector9").click()
    }, 5000);
    setTimeout(function() {
        document.querySelector("selector10").click()
    }, 5000);
    setTimeout(function() {
        document.querySelector('selector11').click()
    }, 5000);
    setTimeout(function() {
        document.querySelector('selector12').click()
    }, 6000);
        setTimeout(function() {
        document.querySelector("selector13").click()
    }, 7000);
    setTimeout(function() {
        document.querySelector("selector14").click()
    }, 7500);

};

我一直在使用超时来完成上一步。 设置在 5000 的行取决于上面的行，设置在 6000、7000 和 7500 的行取决于其他所有内容。 有什么我可以使用的东西可以让一行中的代码在下一行开始之前完成执行吗？

Answer 1

一种选择是承诺setTimeout ，然后在您想“暂停”一下时await它：

const delay = ms => new Promise(res => setTimeout(res, ms));
async function contactDetails(x) {
  document.querySelector("selector7").value=x;
  document.querySelector("selector8").dispatchEvent(new Event('change',{
    bubbles: true
  }));
  await delay(5000);
  document.querySelector("selector9").click();
  document.querySelector("selector10").click();
  document.querySelector('selector11').click();
  await delay(1000);
  document.querySelector('selector12').click();
  await delay(1000);
  document.querySelector('selector13').click();
  await delay(500);
  document.querySelector('selector14').click();
}

（请注意，这需要使contactDetails成为async函数）

Answer 2

如果您的 javascript 曲目中没有 async 和 await：

function contactDetails(x) {
    document.querySelector("selector7").value=x;
    document.querySelector("selector8").dispatchEvent(new Event('change',{
        bubbles: true
    }));
    setTimeout(function() {
        document.querySelector("selector9").click();
        document.querySelector("selector10").click();
        document.querySelector('selector11').click();
        setTimeout(function() {
            document.querySelector('selector12').click();
            setTimeout(function() {
                document.querySelector("selector13").click();
                setTimeout(function() {
                    document.querySelector("selector14").click();
                }, 500);
            }, 1000);
        }, 1000);
    }, 5000);
};