在前一个函数完成后执行javascript函数_Javascript_Asynchronous_Settimeout

在前一个函数完成后执行javascript函数

javascript asynchronous

在前一个函数完成后执行javascript函数,javascript,asynchronous,settimeout,Javascript,Asynchronous,Settimeout,我有一个函数showElement，它有一个setTimeout。如何使对“btnSend”的eventListener中的函数的调用一个接一个地执行我试过了，但没用 document.getElementById('btnSend').addEventListener('click', e => { e.preventDefault(); result = validateInputs(email, subject, message); if(result) {

我有一个函数showElement，它有一个setTimeout。如何使对“btnSend”的eventListener中的函数的调用一个接一个地执行

我试过了，但没用

document.getElementById('btnSend').addEventListener('click', e => {
    e.preventDefault();
    result = validateInputs(email, subject, message);
    if(result) {
        showElement(document.getElementById('formGroupSpinner'), 2000);
        showElement(document.getElementById('formGroupSuccessImg'), 2000);
        resetForm();
    }
});

//expects an html element and a number representing miliseconds. Shows the html element for that amount of time.
function showElement(element, mSeconds) {
    element.classList.remove('d-none');
    element.classList.add('d-block');
    setTimeout( () => {
        element.classList.remove('d-block');
        element.classList.add('d-none');
    }, mSeconds);
}

这两个函数同时执行。

执行所需操作的最简单方法是将第二个showElement更改为4000而不是2000

这样一来，一个将有2秒的超时时间，另一个将有4秒的超时时间。

完成所需操作的最简单方法是将第二个showElement更改为4000，而不是2000

这样一来，一个超时时间为2秒，另一个超时时间为4秒。

有很多不同的方法，但我建议使用如下承诺：

} 有很多不同的方法，但我建议使用这样的承诺：

} 要做出承诺链，你首先必须有一个承诺

function showElement(element, mSeconds) {
  return new Promise(function(resolve,reject){
    element.classList.remove('d-none');
    element.classList.add('d-block');
    setTimeout( () => {
      element.classList.remove('d-block');
      element.classList.add('d-none');
      resolve();
    }, mSeconds);
  }
}

然后你可以使用showElement。然后/*这里的某物*/

要建立承诺链，你首先必须有一个承诺

function showElement(element, mSeconds) {
  return new Promise(function(resolve,reject){
    element.classList.remove('d-none');
    element.classList.add('d-block');
    setTimeout( () => {
      element.classList.remove('d-block');
      element.classList.add('d-none');
      resolve();
    }, mSeconds);
  }
}

然后您可以使用showElement。然后/*此处的某物*/

您可以在函数结束后使用回调执行其他指令：

//First you add a param "callback" to the function
function showElement(element, mSeconds, callback) {
    element.classList.remove('d-none');
    element.classList.add('d-block');
    setTimeout( () => {
        element.classList.remove('d-block');
        element.classList.add('d-none');
        //Then you ask if the callback function is present and call it
        if(callback && typeof callback === "function") callback();
    }, mSeconds);
}

//Then use it in your event like this:
document.getElementById('btnSend').addEventListener('click', e => {
    e.preventDefault();
    result = validateInputs(email, subject, message);
    if(result) {
        showElement(document.getElementById('formGroupSpinner'), 2000, () => {
            showElement(document.getElementById('formGroupSuccessImg'), 2000);
            resetForm();
        });  
    }
});

函数结束后，您可以使用回调执行其他指令：

//First you add a param "callback" to the function
function showElement(element, mSeconds, callback) {
    element.classList.remove('d-none');
    element.classList.add('d-block');
    setTimeout( () => {
        element.classList.remove('d-block');
        element.classList.add('d-none');
        //Then you ask if the callback function is present and call it
        if(callback && typeof callback === "function") callback();
    }, mSeconds);
}

//Then use it in your event like this:
document.getElementById('btnSend').addEventListener('click', e => {
    e.preventDefault();
    result = validateInputs(email, subject, message);
    if(result) {
        showElement(document.getElementById('formGroupSpinner'), 2000, () => {
            showElement(document.getElementById('formGroupSuccessImg'), 2000);
            resetForm();
        });  
    }
});

您可以使用。您必须将showElement函数包装成承诺，并在触发setTimeout后调用承诺解析器。然后，您的呼叫代码可以将您的承诺与以下内容结合在一起：

然而，这很快就会导致回调地狱

您可以通过使用来避免这种情况。将函数标记为async，然后可以在函数中使用wait等待承诺得到解决，然后再继续执行下一个承诺：

await showElement(document.getElementById('formGroupSpinner'), 2000);
await showElement(document.getElementById('formGroupSuccessImg'), 2000);
resetForm();

下面是一个工作演示：

document.getElementById'btnSend'。addEventListener'click'，async e=>{ e、防止违约；等待showElementdocument.getElementById'formGroupSpinner'，2000；等待showElementdocument.getElementById'formGroupSuccessImg'，2000； }; 函数showElementelement，毫秒{ 返回新的PromiseSolve，拒绝=>{ element.classList.remove'd-none'； element.classList.add'd-block'；设置超时=>{ element.classList.remove'd-block'； element.classList.add'd-none'；决定 }，毫秒； }; } d-无{ 显示：无； } d区{ 显示：块； } 邮寄纺纱机成功图像您可以使用。您必须将showElement函数包装成承诺，并在触发setTimeout后调用承诺解析器。然后，您的呼叫代码可以将您的承诺与以下内容结合在一起：

然而，这很快就会导致回调地狱

您可以通过使用来避免这种情况。将函数标记为async，然后可以在函数中使用wait等待承诺得到解决，然后再继续执行下一个承诺：

await showElement(document.getElementById('formGroupSpinner'), 2000);
await showElement(document.getElementById('formGroupSuccessImg'), 2000);
resetForm();

下面是一个工作演示：

document.getElementById'btnSend'。addEventListener'click'，async e=>{ e、防止违约；等待showElementdocument.getElementById'formGroupSpinner'，2000；等待showElementdocument.getElementById'formGroupSuccessImg'，2000； }; 函数showElementelement，毫秒{ 返回新的PromiseSolve，拒绝=>{ element.classList.remove'd-none'； element.classList.add'd-block'；设置超时=>{ element.classList.re 移动“d-块”； element.classList.add'd-none'；决定 }，毫秒； }; } d-无{ 显示：无； } d区{ 显示：块； } 邮寄纺纱机

Success imageHello Floro，你似乎是JS新手，寻找JavaScript回调。请添加你的HTML:@jo_va not relevant to use then，你需要Hello Floro，你似乎是JS新手，寻找JavaScript回调。请添加你的HTML:@jo_va not relevant to use then，你需要是的，那会有用的，但也会非常有用unelegant@Sv443并不是每件事都必须过于复杂，所以它是优雅的，不仅如此，它也更不可靠。是的，这是可行的，但它也将是非常重要的unelegant@Sv443并不是每件事都必须过于复杂，所以它是优雅的，不仅如此，它还更加复杂不可靠，你会想，though@Bergi对不起，我不明白你的意思。如果它很重要，你可以编辑一下答案吗？没有在中那么重要，但它仍然是更好的风格。编辑。谢谢你，在尝试了不同的方法后，这一个对我有效。你会想，though@Bergi对不起，我不明白你的意思。如果它很重要，你可以编辑一下答案吗？没有在中那么重要，但它仍然是更好的风格。编辑。谢谢你，在尝试了不同的方法之后，这一个对我有效。谢谢你，在尝试了不同的方法之后，这一个对我有效。然而，我最终使用了BergiThank you提供的解决方案，在尝试了不同的方法之后，这个方法对我有效。然而，我最终使用了Bergi提供的解决方案