Javascript 如何使函数等待前一行代码完成

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

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的行取决于其他所有行。我是否可以使用任何东西让一行中的代码在下一行开始之前完成执行

一个选项是提示

设置超时

，然后

等待

它，只要您想“暂停”一段时间：

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

功能）

一个选项是提示

setTimeout

，然后

在需要“暂停”一段时间时等待它：

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
函数）
如果您的javascript曲目中没有async和wait：

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);
};

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

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);
};

如果在没有超时的情况下这样做会发生什么？单击选择器是否会产生某种效果？请使用函数回调而不是设置超时。参考：-如果在没有超时的情况下这样做会发生什么？单击选择器是否会产生某种效果？使用函数回调而不是设置超时。参考：-