Javascript/AJAX异步加载旋转器

Javascript/AJAX Asynchronous Loading Spinners

本文关键字：旋转 加载 异步 AJAX Javascript      更新时间：2023-09-26

我试图使一个基本的足够的页面，允许用户通过单击一个按钮来执行php脚本。每个按钮将有一个加载微调器弹出点击。

我的问题是，点击一个按钮，然后点击另一个按钮，两个旋转器在同一时间关闭，即使第二个可能仍在处理。

有人知道如何使这些旋转器真正异步吗?提前谢谢你，这简直要杀了我。

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>

我将实现一个计数器。每次显示加载指示器时，向计数器添加1，每次想要隐藏它时，减去1。然后监视计数器，当它高于零时显示加载指示，当它在零时隐藏它。有意义吗?

类似下面的代码(未经测试)可能会达到这个目的，它巧妙地意味着您可以完全避免在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
};

编辑:好吧，看到了对另一个答案的评论，我意识到这并不能完全解决你所处的情况。我想一下，看看能不能做得更好。

EDIT2:我认为这个(仍然未经测试，不幸的是)代码可能是你需要的。如果您有任何问题，请在评论中告诉我。

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
};
相关文章：