Добавление функции Spinner внутри функции JQuery onclick

Question

У меня есть следующий код.

----HTML Part--- 
<div id="Optimize" class="Div"> Optimize </div> 


----Jquery Part--- 
$('#Optimize').click(function() 
{ 

var form_data = new FormData(); 
form_data.append('action',"Opt"); 
var perlURL= "$code"; 

$.ajax({   
     url: perlURL, 
     data: form_data, 
     type: 'post', 
     datatype: "script", 
     success: function(result) { 
     }, 

     });   
}); 

Как только пользователь нажимает кнопку «Оптимизация», следующий код jquery будет выполняться и отображать результаты для пользователя. Теперь мне нужно вставить Spinner всякий раз, когда пользователь нажимает «Оптимизация», чтобы показать, что данные загружаются. Как только данные будут загружены, счетчик должен остановиться. Итак, у меня есть две функции. Если я вставлю эти 2 функции, код JQuery будет выглядеть следующим образом.

$('#Optimize').click(function() 
{ 
startSpin(); // ------------------------START SPIN HERE---------------- 
var form_data = new FormData(); 
form_data.append('action',"Opt"); 
var perlURL= "$this_code"; 

$.ajax({   
     url: perlURL, 
     data: form_data, 
     type: 'post', 
     datatype: "script", 
     success: function(result) { 
     stopSpin(); // --------------STOP SPIN HERE -------------- 
     }, 

});   

Этот код должен работать должным образом. т. е. счетчик должен начинаться, как только пользователь нажимает «Оптимизировать». но это не начинается. я чувствую, что он сразу же выполняет выполнение асинхронным образом.

Как я могу гарантировать, что пользователь выполнит startSpin(); сначала, а затем более позднюю часть функции?

Я прочитал о обещании() и попробовал различные способы выполнения обеих функций одновременно. но не смог преуспеть.

Answer 1

Это, безусловно, поможет кому-то. Я попытался использовать функцию bind в jquery и попытался связать обе функции с событием onclick. это было безуспешно.

Однако после нескольких попыток я подумал об использовании функции jquery внутри функции javascript. Итак, теперь обе функции - это простые функции javascript. Я сделал следующее.

-----------HTML CODE------------- 
----------START SPIN HERE------------ 
<div class="Div" onclick="startSpin();setTimeout(function() { runopt(); }, 100); " > Run Optimization </div> 


-----------SCRIPT CODE------------- 
<script type="text/javascript"> 
function runopt() { 

//$('#Optimize').click(function() 
// { 

var form_data = new FormData(); 
form_data.append('action',"Opt"); 
var perlURL= "$code"; 

$.ajax({   
     url: perlURL, 
     data: form_data, 
     type: 'post', 
     datatype: "script", 
     success: function(result) { 
     }, 

}); 
stopSpin(); // -----------------STOP SPIN HERE ----------------- 
// }); 
} 

Прокомментированные значения в сценарии означают более ранний код. Я использовал обе функции на стороне html onclick и задерживал вторую функцию на 100 мсек. он сделал трюк. первая функция была разрешена для запуска, а затем выполнялась вторая функция {runopt()}.