javascript - 只有在功能1和2完成后才调用功能3

我如何确保仅在函数执行后才执行函数createOverzicht
checkNotEmpty和checkNumber已完成，现在，如果我单击按钮函数createOverzicht，它应该被调用，但是那不应该发生，仅应在前两个函数执行完或完成后才调用createOverzicht。
在这种情况下，我有一个表单，并且前两个函数用于验证输入，因此这就是为什么我不希望在没有任何内容填充时执行createOverzicht或执行

为了简化概念，这就是我的意思：

function createOverzicht() {
  if (checkNotEmpty && checkNumber) {
    alert('hi');
  };
  else {
    //do nothing
  };
}


function checkNotEmpty(field, span) {
  if (field.value.length > 1 && isNaN(field.value)) {
    document.getElementById(span).className = 'goed';
    document.getElementById(span).innerHTML = '<img src=\'../img/ok.png\'>';
  } else {
    document.getElementById(span).className = 'nietgoed';
    document.getElementById(span).innerHTML = '<img src=\'../img/notok.png\'>';
  };
};

function checkNumber(field, span) {
  if (field.value.length == 10 && !isNaN(field.value)) {
    document.getElementById(span).className = 'goed';
    document.getElementById(span).innerHTML = '<img src=\'../img/ok.png\'>';
  } else {
    document.getElementById(span).className = 'nietgoed';
    document.getElementById(span).innerHTML = '<img src=\'../img/notok.png\'>';
  };
};


function createOverzicht() {
  alert('hi');
}

window.onload = function() {
  document.getElementById('naam').oninput = function() {
    checkNotEmpty(this, 'meldingNaam');
  };
  document.getElementById('achternaam').oninput = function() {
    checkNotEmpty(this, 'meldingAchternaam');
  };
  document.getElementById('telefoonnummer').oninput = function() {
    checkNumber(this, 'meldingTel');
  };

  document.getElementById('overzicht').onclick = function() {
    createOverzicht()
  };
};

最佳答案

据我所知，您有两个选择：

1）存储每个输入的状态（有效或无效）

这可能很难维护！

2）在“ createOverzicht”内部调用一个检查是否一切正常的函数

这种选择将暗示对验证函数进行一些更改，如果字段有效或相反，则需要它们返回true；否则，返回false。还应在“ createOverzicht”的开头添加一些代码。
该实现将如下所示：

function createOverzicht() {
    checkNotEmpty(document.getElementById('naam'), 'meldingNaam');
    checkNotEmpty(document.getElementById('achternaam'),'meldingAchternaam');
    checkNumber(document.getElementById('telefoonnummer'), 'meldingTel');
    alert('hi');
}
function checkNotEmpty(field, span) {
    if (field.value.length > 1 && isNaN(field.value)) {
        document.getElementById(span).className = 'goed';
        document.getElementById(span).innerHTML = '<img src=\'../img/ok.png\'>';
        return true;
    } else {
        document.getElementById(span).className = 'nietgoed';
        document.getElementById(span).innerHTML = '<img src=\'../img/notok.png\'>';
        return false;
    };
};

function checkNumber(field, span) {
    if (field.value.length == 10 && !isNaN(field.value)) {
        document.getElementById(span).className = 'goed';
        document.getElementById(span).innerHTML = '<img src=\'../img/ok.png\'>';
        return true;
    } else {
        document.getElementById(span).className = 'nietgoed';
        document.getElementById(span).innerHTML = '<img src=\'../img/notok.png\'>';
        return false;
    };
};

可能为此使用像jQuery这样的javascript库，jQuery Validator插入将帮助您获取战利品。