Prehliadač Google Chrome - zobrazenie a skrytie prvkov - javascript, jquery, ajax, google-chrome

Toto je môj vzorový kód (jQuery):

$("#anyElement").click(function() {
$("#progress").show() ;
/**
loading result with ajax
time it about 2 sec.
*/
$("#progress").hide() ;
$("#resultDisplay").show() ; // display result of ajax
}) ;

Všetky prehliadače (nie Chrome) fungujú:

1. anyElement -> kliknite
2. postup -> zobraziť
3. funkcia vráti výsledok ajax: reqest -> odpoveď servera po 2 sekundách
4. pokrok -> skryť
5. resultDisplay -> zobraziť výsledok ajax

ale chróm:

1. anyElement -> kliknite
2. funkcia vráti výsledok ajax: reqest -> odpoveď servera po 2 sekundách
3. resultDisplay -> zobraziť výsledok ajax

Keď používam nástroje pre vývojárov a kód sa vykonáva krok za krokom, všetko funguje dobre. Mohol by mi to niekto vysvetliť? Vďaka.

odpovede:

Tu je niečo, čo by ste mohli vyskúšať.

Zatvorte svoj call ajax do settimeout, takže Chrome má čas skutočne zobraziť prvok postupu.

setTimeout(function() {
//Code to run your ajax call and hide the progress image.
},250)

Pridáva sa to len oneskorenie 1/4 sekundypravdepodobne by ste mohli experimentovať a priniesť to oveľa menšiemu oneskoreniu, ale vráti kontrolu nad prehliadačom, aby skutočne aktualizoval prvky zobrazené používateľovi.

V závislosti od vášho ajax volania a spôsobu jeho zabaleniato znie ako chróm isnt čaká na to dokončiť pred prechodom na ďalší riadok kódu. Ajax hovory z definície sú asynchrónne, takže javascript doesnt čakať na ukončenie hovoru skôr, ako sa presuniete. To znamená, že váš kód volá progress.show() a potom ajax a potom progress.hide() ale pretože ajax volanie je asynchrónne podobne progress.show() a progress.hide() sú volané vedľa seba - tj tak rýchlo, že je ťažké zaregistrovať ich účinky.
jQuery má a $.when() funkciu, ktorá bude čakať na dokončenie vášho procesu ajax predtým, ako prejdete na ďalší bit vášho kódu.

Tam je možné, kde je vaša AJAX volania asyncnastavte na hodnotu false a pokrok je načítanie gif, potom sa gif vďaka synchronnému hovoru prestane pohybovať v prehliadači Chrome. Ak je to tak, potom riešením nie je použitie synchronného hovoru. Môžete skryť pokrok, keď sa dokončí ajax.

$.ajax({
...
success: function() {
$("#progress").hide() ;
$("#resultDisplay").show() ;
}
});