Имея проблемы с JavaScript соглашение о вызове

Question

Вот снимок кода:

Если функция testFields в Line:3 возвращает ложь, управление справедливо переходит к Line:21 и возвращает ложные. Если testFields возвращает истинное, управление переходит к Line:4, а затем вместо того, чтобы идти на обрабатывать ответ, возвращаемый в функции в Line:5, управление переходит к Line:21, где RetVal все еще ложные. То есть, условие Line:6 проверяется после того, как функция вернула значение функции:

<form method="POST" onsubmit="return validateInput()" /> 

Где, как, по логике вещей, он должен сначала проверить состояние на Line:7 затем решить, следует ли retVal быть истинной или пусть это значение по умолчанию false, а затем значение должно быть возвращено через Line:21.

Что логически неправильно с моим кодом?

Answer 1

Существует два способа.

1. Вы можете сделать синхронный запрос ajax.

   var retVal ; 
   $.ajax({ 
       url: youUrl, 
       async: false, // required to pause script until request is done 
       success: function(ret) { 
        retVal = ret; // ret is invisible outside this callback 
   
       }, 
       error : function(err) { 
        // your error logic 
       } 
   
   }); 
   //We'll in this line if request is completed and either success or error callback was called. 
   return retVal; 
   

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

   $("form").submit(function(e, extra) { 
   
       if(!extra) 
       $.post( 
        url: "script.php", 
        data: "yourdata", 
        success: function() { 
        $("form").trigger("submit", [true]);   
        }, 
       error: function(){} 
   ); 
   
       // extra parameter will be always undefined until we'll not pass it in an array which will be aplied to listener as next ones arguments - take a look at success callback 
       return !!extra // doubled negate operator ensures that extra will be returned as boolean because if you return undefined that means you didn't return anything 
   }); 
   

и в HTML тег формы без onsubmit декларации:

<form method="POST" /> 

Answer 2

Там нет ничего плохого с кодом : это то, как работают асинхронные функции. Ajax предназначен для асинхронности, что означает строку кода после вызова функции $.post() - в вашем случае конец if и return в строке 21 - будет выполнен немедленно. Между тем, браузер отсылает запрос Аякса и когда ответ приходит в него то называет свой успех (или ошибка) функции обратного вызова в строке 5.

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

Answer 3

В дополнение к решению от @abuduba, следующий код также будет работать.

Здесь btnSubmit не кнопка типа 'Submit', но простой кнопки.

<input type="button" id="btnSubmit" value="Submit" />