Как выполнить код последовательно?

function SubmitData (data) { 	// Проверка включена ли grecaptcha в настройках 	if ($('#grecaptcha').length > 0) {         $.getScript('https://www.google.com/recaptcha/api.js?render=SITEKEY', function() {             grecaptcha.ready(function() { 		grecaptcha.execute('SITEKEY', {action: '123'}).then(function(token) { 			console.log('111'); 		});             });         }); 	} 	console.log('222');  	$.ajax({         type: "POST",         url: address,         data: $(formId).serialize(),         contentType: "application/x-www-form-urlencoded",         dataType: "text",         success: function (data) {         }     }); }

При выполнении функции я вижу в Console сначала вывод 222, а спустя время 111.

Как исправить? Требуется, если выполняется условие $('#grecaptcha').length > 0, чтобы выполнение $.ajax начиналось только после выполнения grecaptcha.execute

Дополнительно:

async function SubmitData(data) {   let captchaToken;    // Проверка включена ли grecaptcha в настройках   if ($('#grecaptcha').length > 0) {     captchaToken = await getCaptchaToken({action: '123'});   }      console.log(captchaToken);    const response = await postForm(address, formId);    console.log(response); }  function postForm(sendTo, formId) {   return new Promise(res => {     $.ajax({       type: "POST",       url: sendTo,       data: $(formId).serialize(),       contentType: "application/x-www-form-urlencoded",       dataType: "text",       success: (data) => {         return res(data);       }     });   })  }  function getCaptchaToken(opts) {   const SITE_KEY = 'SITEKEY';    return new Promise((res) => {     $.getScript('https://www.google.com/recaptcha/api.js?render=' + SITE_KEY, () => {       grecaptcha         .ready(() => {           grecaptcha             .execute(SITE_KEY, opts)             .then((token) => {               return res(token);             });         });     });   }) }

1. Перестань jquery использовать
2. await

Ну или продолжай цепочку коллбэков

function SubmitData (data) { 	// Проверка включена ли grecaptcha в настройках 	if ($('#grecaptcha').length > 0) {         $.getScript('https://www.google.com/recaptcha/api.js?render=SITEKEY', function() {             grecaptcha.ready(function() { 		grecaptcha.execute('SITEKEY', {action: '123'}).then(function(token) { 			console.log('111'); 		}).then(()=> { 	$.ajax({         type: "POST",         url: address,         data: $(formId).serialize(),         contentType: "application/x-www-form-urlencoded",         dataType: "text",         success: function (data) {         }     }); });             });         }); 	} 	console.log('222'); }

• Василий Банников проблема в том, что придется 2 раза вставлять $.ajax одинаковый при такой конструкции
• Us59, зачем 2 раза одинаковый $.ajax? Почему придётся?
  Ааа, понял.
  Ну тогда в функцию выноси.

  Или смотри первую половину моего ответа - выкидывай нафиг этот $.ajax и используй fetch. Ты что, по гайдам из 2003 года учился?

• Василий Банников, придерживаюсь основных функций текущего проекта, т.к. это доработки проекта, а не написание чего-то с полного 0
• Us59, а в чём проблема то заюзать fetch и async/await?
  Это же не отдельная библиотека, которая сделает код жирнее, да никакую особенную архитектуру не диктует.
• Василий Банников, можете показать пример? Смысл в том, что функция SubmitData вызывается во многих частях проекта, и нужно доработать часть с загрузкой рекапчи именно в самой функции, чтобы не перелопачивать весь проект. Тем временем я пойду изучать fetch в гугле, т.к. не использовал ранее.
• Us59, типа так:
  Даже без перехода на fetch

  async function SubmitData (data) { // Проверка включена ли grecaptcha в настройках if ($('#grecaptcha').length > 0) { await $.getScript('https://www.google.com/recaptcha/api.js?render=SITEKEY', function() { grecaptcha.ready(function() { grecaptcha.execute('SITEKEY', {action: '123'}).then(function(token) { console.log('111'); }); }); }); } console.log('222'); await $.ajax({ type: "POST", url: address, data: $(formId).serialize(), contentType: "application/x-www-form-urlencoded", dataType: "text", success: function (data) { } }); }

  async function SubmitData (data) { // Проверка включена ли grecaptcha в настройках if ($('#grecaptcha').length > 0) { await $.getScript('https://www.google.com/recaptcha/api.js?render=SITEKEY', function() { grecaptcha.ready(function() { grecaptcha.execute('SITEKEY', {action: '123'}).then(function(token) { console.log('111'); }); }); }); } console.log('222'); await $.ajax({ type: "POST", url: address, data: $(formId).serialize(), contentType: "application/x-www-form-urlencoded", dataType: "text", success: function (data) { } }); }

• Василий Банников, попробовал применить этот код, однако результат такой же, в Console видим вызов 222, и только через время 111.
• Василий Банников, разобрался. Вы можете использовать await только тогда, когда ваш ответ возвращает обещание. К сожалению, jQuery ajax не возвращает Promise после завершения.
• Us59, какой "этот"?
• Us59,
  

  К сожалению, jQuery ajax не возвращает Promise после завершения.

  Тогда коллбэки используй, либо уходи с jquery)