W obliczu następującego kodu w bloku sukcesu żądania AJAX:

$('#something').remove();
alert('something was removed');

Kiedy wykonałem, spodziewałem się, że zakończyło usunięcie "coś" i potwierdził alarm, ale z jakiegoś powodu pojawia się alert i dopiero po potwierdzeniu element został usunięty.

Dlaczego to się zdarza? Jest to trywialny kod i chciałbym uniknąć zwrotów i takich. Co powinienem sprawdzić?

Został przetestowany na FF. Dzięki za wskazówki.

1
Dropout 5 wrzesień 2017, 11:07

2 odpowiedzi

Najlepsza odpowiedź

Podobnie jak Ivan Minakov powiedział w jego odpowiedziach, aby zobaczyć stronę odmalowaną przed alertem, musisz pozwolić Twój kod JavaScript. Po tym nastąpi, możesz zaplanować kontynuację - wyświetlanie alertu.

Zwykle nie stało się to w JavaScript - funkcje, takie jak alert, a monit są wyjątkowe w tym sensie, że faktycznie blokują wątek, dopóki użytkownik działa.

Oznacza to, że możesz osiągnąć to, czego chcesz:

$('#something').remove();
setTimeout(() => {
  alert('something was removed');
});

Lub z async / czekaj, jeśli to twoja rzecz:

// in an async function
$('#something').remove();
await delay(0);
alert('something was removed');

// ...somewhere...

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
3
Kos 5 wrzesień 2017, 08:44

Jako t.j. Crowders powiedział w jego Odpowiedź:

DOM Manipulacje (wkładanie elementów, usuwanie ich, przenoszenie) są synchroniczne, chociaż użytkownik może nie zobaczyć wyniku, dopóki kodu JavaScript, pozwalając przeglądarce użyć wątku, aby odmalować wyświetlacz.

7
Ivan Minakov 5 wrzesień 2017, 13:45