检查starSpin（）是否已在运行，并在运行时使用stopSpin（）将其停止

Question

I am using spin.js to show spinner before the data gets loaded on the screen. I have several tabs. Everytime, i click on a tab, it shows spinner and i have kept stopSpin() inside the function so that when the data gets loaded, the spinner will stop.

This runs fine in normal condition. User clicks tab -- Spinner starts -- Data gets loaded-- spinner stops.

But when i click on a tab and at that moment click on other tab, the spinner keeps on spinning. This spinner is of the first tab i clicked. It didnt let the complete function to run and when i clicked on other tab, the new spinner got loaded and stops. But the first tabs spinner continues to spin...

Is there a way to check if i can see if the spinner is running initially and stop it if at all it is running.

**\\$("#rpt21 a.keepopen").click(function(){ \\$("#report_panel").html(""); \\$("#report_panel,#report_header,#report_panel_alldata,#report_header_alldata").hide();

    $get_parameters;
    startSpin();
    x = getDataForRpt(rmanager,manager,account,folderdate,pricedate,"buy_list","$tmp_rpt_folder","$tmp_rpt","runRpt");
    \$("#report_panel").show();

});**

**

    function getDataForRpt(rmanager,manager,account,folderdate,pricedate,rpt_name,tmp_folder,tmp_rpt,action)
    {

    var perlURL= "$thiscode"; 
    \$.ajax({       
        url:    perlURL,
        data:   {rmanager:  rmanager,
             manager:   manager,
             account:   account,
             folderdate:    folderdate,
             pricedate: pricedate,
             rpt_name:  rpt_name,
             tmp_folder:    tmp_folder,
             tmp_rpt:   tmp_rpt,
             action:    action
             },
        success: function(result) {
                          if(result.isOk == false){
                              alert("no data");}

                          //\$("#report_panel").load("$url_link/webtmp/$tmp_rpt");  

                  \$("#report_panel").html("<object data='$url_link/webtmp/$tmp_rpt' , type='text/html' width=97% height=100%></object>");
                  //\$("#report_panel").html('<object data="http://apmqa.mcm.com/webtmp/web_table_rpt.html" type="text/html" width=1000 height=500 ></object>');
    //\$("#report_panel").load("http://apmqa.mcm.com/webtmp/test_web_table_rpt.html");  
                          stopSpin();

                      },

         }); 


    }

**

You can see here i have used start spin when a tab is clicked. There are several functions like this and each has startSpin() in it.

The getDataForRpt is common. So i have kept one stopSpin() there.

Answer 1

I got the answer for this. If anybody wants to know, here it is.

**function startSpin(){
startSpin.called = true;
var target = document.getElementById('spin_container');
var spinner = new Spinner(opts).spin(target);
\$('#spin_container').data('spinner', spinner);
}**

Insert startSpin.called = true; in the main function and type below wherever we want the spinner to load. This way, it will check if spinner is active or not. If active, it would stop original spinner first and then proceed with next function.

**if (startSpin.called){
stopSpin();`enter code here`

}**