Javascript/AJAX Asynchronous Loading Spinners

我試圖做一個基本的頁面，允許用戶通過點擊一個按鈕來執行一個php腳本。每個按鈕在點擊時都會有一個加載微調器彈出。Javascript/AJAX Asynchronous Loading Spinners

我的問題是，在點擊一個按鈕，然後單擊另一個，無論是紡紗收於完全相同的時間，即使第二個可能仍在處理中。

有誰知道如何使這些微調真正的異步？非常感謝，它殺了我。

JS：

function test(element){ 
    var append = "#"; 
    var test = append.concat(element); 

    document.getElementById(element).style.visibility='visible'; 

      $.ajax({url:"test.php",success:function(result){ 
        hide(element); 
      } 

      }); 
     }; 

    function hide(element){ 
     document.getElementById(element).style.visibility='hidden'; 
    }; 


</script>

HTML：

<html> 
    <? 
    $index = 0; 
$myArray = array ("1", "2", "3", "4", "5"); 
for($index = 0; $index < 5; $index++){?> 

    <button onclick="test('<?echo $myArray [$index];?>')">Start</button> 

<img id="<?echo $myArray [$index];?>" src="images/loader.gif"   
    style="visibility:hidden"/> 
    <br><br> 

    <?}?> 

    </html>

來源

2013-05-17 user2395608

我會實現一個計數器。每次顯示加載指示符時，向計數器添加一個，每次要隱藏它時，減去一個。然後監視計數器，每當它高於零時顯示加載指示器，並在零時將其隱藏。合理？

來源

2013-05-17 22:25:04 Matthew

謝謝，我明白你的漂移了，我會報告回來，建議在此期間歡迎任何人。 – user2395608

只是檢查你知道我的意思是那裏會有5個加載旋鈕？不只是一個 – user2395608

你想要五個加載指標或只有一個？ – Matthew

類似下面的（未經測試）的代碼可能做的伎倆，它巧妙地意味着你能避免在Ajax請求都擔心微調：

var spinningAjax = (function() { // use of the closure created by an immediate function gives us the scope to create a persistant counter variable 
    var counter = 0; 
    $(document).ajaxComplete(function() { 
     counter--; 
     if (counter === 0) { 
      showSpinner(false); 
     } 
    }); 
    return function(settings) { 
     counter++; 
     showSpinner(true); 
     $.ajax(settings); 
    } 
})(); 

var showSpinner(bool) { 
    // I'll leave this up to you as it looks like your posted html/js is for example purposes rather than replicating your actual site 
};

編輯：好吧，在看到評論到另一個答案，我意識到這並不完全解決你的情況。我會想一想，看看我能不能做得更好

編輯2：我認爲這（仍未經測試，不幸）代碼可能是你需要的。如果您有任何問題，請在評論中告訴我。

var spinningAjax = (function() { // closure of immediate function lets us create a persistant array of the counters for each spinner 
    var counter = []; // an array to hold the counters for each spinner 
    $(document).ajaxComplete(function(event, xhr, settings) { // called whenever any ajax request is completed 
     if (typeof settings.ajaxGroup !== 'undefined') { // only update the counters if an ajaxGroup has been provided 
      counter[settings.ajaxGroup]--; 
      if (counter[settings.ajaxGroup] === 0) { 
       showSpinner(false, settings.ajaxGroup); // hide spinner when all requests connected with the spinner have been completed 
      } 
     } 
    }); 
    return function(settings) { // this is the function actually assigned to the variable spinningAjax as a result of the immediate function 
     counter[settings.ajaxGroup] = counter[settings.ajaxGroup] ? counter[settings.ajaxGroup]+1 : 1; // can't just use the ++ operator as this property might not be defined yet 
     showSpinner(true, settings.ajaxGroup); 
     $.ajax(settings); 
    } 
})(); 

var showSpinner(bool, spinnerIdentifier) { 
    // I'll leave this up to you as it looks like your posted html/js is for example purposes rather than replicating your actual site 
};

來源

2013-05-17 22:50:26

非常感謝您花時間以任何方式 – user2395608

Javascript/AJAX Asynchronous Loading Spinners

回答

相關問題