在 Jquery onclick 函数中添加 Spinner 函数

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 代码将执行并向用户显示结果。现在我需要在用户单击优化以显示数据正在加载时插入一个微调器。加载数据后，微调器应停止。所以我有两个功能。如果我插入这两个函数，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 --------------
        },

});

此代码应按预期工作。即，只要用户点击 "Optimize"，微调器就会启动。但它没有启动。我感觉它立即以异步方式执行。

如何确保用户执行了startSpin()；首先，然后是函数的后面部分？

我已经阅读了有关 promise() 的内容，并尝试了多种方法来同时执行这两个功能。但无法成功。

Answer 1

这肯定会对某人有所帮助。我尝试在 jquery 中使用绑定函数，并尝试将这两个函数绑定到 onclick 事件。它没有成功。

然而，在多次重试之后，我想到了在 javascript 函数中使用 jquery 函数。所以现在这两个函数都是普通的 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 毫秒。它成功了。第一个函数被允许运行然后第二个函数 { 运行opt() } 是运行。

在 Jquery onclick 函数中添加 Spinner 函数

Adding Spinner Function inside Jquery onclick function

javascript

jquery

function

onclick