在Jquery onclick函数中添加Spinner函数

时间:2015-09-22 20:36:44

标签: javascript jquery function onclick

我有以下代码。

----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) {
        },

        });        
}); 

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

});        

此代码应按预期工作。一旦用户点击&#34;优化&#34;就会启动微调器。但它并没有开始。我感觉它会立即以异步方式执行。

我如何确保用户执行startSpin();首先,然后是功能的后半部分?

我已经阅读了promise()并尝试了各种方法同时执行这两个功能。但无法成功。

1 个答案:

答案 0 :(得分:0)

这肯定会对某人有所帮助。我尝试在jquery中使用bind函数,并尝试将这两个函数绑定到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毫秒。它成功了。允许第一个函数运行,然后运行第二个函数{runopt()}。