Как сделать функции событий jquery синхронными?

Question

Я хочу получить значения из тегов <select> и <input> для дальнейшей обработки, но поскольку JS асинхронен по своей природе, он не ожидает получения значений и переходит к следующему шагу без ожидания.Вот мой код:

$(".button").click(function(){
    $("select.form-control").change(function(){
        invoiceType=$(this).children("option:selected").val();
    });

    $("input").blur(function(){
        invoiceNumber=$(this).val();
    });

    if(invoiceNumber && invoiceType){ // here I am getting undefined
      //logic
    }
}

То, что я пробовал:

1) Async / await

2) Jquery.when (). Then() Но не повезло.Спасибо за помощь.

Answer 1

Вы можете решить это очень простым способом.Просто вызовите функцию в обоих обработчиках событий и выполните логику, если обе переменные определены.

$(".button").click(function() {
  let invoiceType, invoiceNumber;
  $("select.form-control").change(function() {
    invoiceType = $(this)
      .children("option:selected")
      .val();
    doSomething();
  });

  $("input").blur(function() {
    invoiceNumber = $(this).val();
    doSomething();
  });

  function doSomething() {
    if (invoiceNumber && invoiceType) {
      //logic
    }
  }
});

Answer 2

Вы должны быть осторожны при регистрации этих событий в обработчике click.Вещи могут быстро запутаться, если вы не отмените их регистрацию.

Вам понадобится состояние для отслеживания вещей, поэтому я создал eventFlags:

let button = document.querySelector('button');
let select = document.querySelector('select');
let input = document.querySelector('input');

let eventFlags = {
  clicked: false,
  changed: false,
  blurred: false
};

button.onclick = function() {
  console.log('clicked');
  eventFlags.clicked = true;
  return false;
};

select.onchange = function(event) {
  console.log('changed');
  eventFlags.changed = event.target.value;
  doCheck();
};

input.onblur = function(event) {
  console.log('blurred');
  eventFlags.blurred = event.target.value;
  doCheck();
};

function doCheck() {
  if (eventFlags.clicked &&
    eventFlags.changed &&
    eventFlags.blurred) {
    alert(`ready: ${eventFlags.changed} ${eventFlags.blurred}`);
  }
}

<form>
  <tbody>
    <tr>
      <td>button</td>
      <td>
        <button>click</button>
      </td>
    </tr>
    <tr>
      <td>select</td>
      <td>
        <select>
          <option value="a">A</option>
          <option value="b">B</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>input</td>
      <td><input type="text"></td>
    </tr>
  </tbody>
</form>