2

ユーザーがボタンをクリックしてphpスクリプトを実行できる基本的なページを作成しようとしています。各ボタンをクリックすると、読み込みスピナー ポップアップが表示されます。

私の問題は、あるボタンをクリックしてから別のボタンをクリックすると、2番目のスピナーがまだ処理中であっても、両方のスピナーがまったく同時に閉じることです。

これらのスピナーを真に非同期にする方法を知っている人はいますか? 事前にどうもありがとう、それは私を殺します。

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>
4

2 に答える 2

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
};
于 2013-05-17T22:50:26.027 に答える
1

カウンターを実装します。ローディング インジケーターを表示するたびにカウンターに 1 を加算し、非表示にするたびに 1 を減算します。次に、カウンターを監視し、ゼロを超えると読み込みインジケーターを表示し、ゼロになると非表示にします。わかる？

于 2013-05-17T22:25:04.317 に答える