Funkcja wykonujący się po załadowaniu Ajaxów

Question

Mam problem i nie mogę znaleźć rozwiązania. Mam funkcję w JS, która z wykorzystaniem AJAX przesyła dane do skryptu PHP, który zwraca odpowiedź czy się udało czy nie.

Dane, które mają zostać przesłane są w tabeli i użytkownik wybiera zaznaczając checkboxy, które wiersze mają być przesłane. Jeden wiersz = jedno wywołanie przez AJAX skrypty PHP.

Chcę aby na czas wykonywania wszystkich zapytań AJAX strona się blokowała. Nakładam odpowiedniego overlaya, z ikonką ładowania i działa to ale tylko przez chwilę, do momentu otrzymania pierwszego wyniku.

Czy jest opcja, która sprawdza czy w tle wykonywane są jakiekolwiek czynności i po ich zakończeniu mogła by dopiero wyłaączać overlaya?

Answer 1

Wrzuć każde zapytanie w osobny promise, a w Promise.all() po wykonaniu wszystkich wyłącz overlay?

Comments

Ok, dzięki. Doszedłem do momentu, w którym overlay wyświetla się ciągle i nie mogę go przerwać.

Dodałem

Promise.all([
    mojaFunkcja(),
]).then(offOverlay());

Ale jakby nie uruchamia się samo, dopiero jak ręcznie wywołam z konsoli to overlay się wyłącza, jakiś pomysł?

---

Spróbuj tak

Promise.all([
    mojaFunkcja(),
]).then(function(){ off() } );

//czy w krótszej wersji

Promise.all([
    mojaFunkcja(),
]).then(() => off());

(choć osobiście polecam korzystać z Async/Await :P)

---

Coś nie bardzo rozumiem. Moją funkcję wywołuje przez onClick na button i funkcja w uproszzeniu wygląda teraz tak:

 

function mojaFunkcja()
{
	onOverlay();
	var arrLen = $('input').length;
	var arrLenCh = $('input:checked').length;
	var count = 0;
	for(i = 0; i < arrLen ; i++)
	{
		new Promise(() => 
                {
		if($('#id_'+i).is(':checked'))
		{
			$.ajax({
			},
			complete: function(){
			}})			
			.done(function(res)
			{
			})
			.fail(function() {
			});	
		}
		});


	}
}	

to teraz w, którym momencie powinienem wywolać 

Promise.all([mojaFunckja(),]).then(() => off());

przy onClicku czy po prostu gdziekolwiek w kodzie?

Bo póki co nie chce przerwać overlaya w żaden sposób

---

async function mojaFunkcja()
{
    onOverlay();
    var arrLen = $('input').length;
    var arrLenCh = $('input:checked').length;
    var count = 0;
    for(i = 0; i < arrLen ; i++)
    {

        if($('#id_'+i).is(':checked'))
        {
            await $.ajax({
            },
            complete: function(){
            }})         
            .done(function(res)
            {
            })
            .fail(function() {
            }); 
        }
  
    }
}   

mojaFunkcja().then(() => off());

Pewnie jakoś tak, ale nie obiecuję. 

 

przy onClicku czy po prostu gdziekolwiek w kodzie?

no tam gdzie chcesz to wywołać. 

---

też nie, jeśli chcesz żeby wszystkie zapytania były na raz.

    for(i = 0; i < arrLen ; i++)
    {
        new Promise(() => {...});
    }

Dość blisko, ale chodzi o to, żeby ten Promise teraz wrzucić do jednej tablicy i na tablicy ze wszystkimi promise'ami wywołać Promise.all().

---

Wielkie dzięki, działa :)