Javascript: location = něco uvnitř asynchronní funkce způsobuje, že nadále předtím, než skutečně mění polohu

Question 1

kód:

1    $(document).on('click', 'input[name="shipping_method"]', async function () {
2        await sleep(1);
3        $('#button-shipping-method').click();
4        await waitForRequestsDone();
         //sleep(10000); - if I uncomment this - the redirect happens without firing the next click.
5        $('#button-payment-method').click(); 
6        await waitForRequestsDone();
7    });

Linka 2: mysticky musím použít to, aby toto kouzlo funguje správně

Linka 3: ten chlap hovory pravidelné synchronní ajax a v případě chyby ukončí funkci s location = 'some_error_url'

Linka 4: tato funkce čeká na ajax volání dokončit

Linka 5: tento chlap také vyžaduje pravidelné synchronní ajax, a v případě chyby v předchozí volání v řádku 3 vidím, že tento hovor je také vystřelil předtím, než je stránka přesměrována.

Tam je docela velký špagety-styl logiku uvnitř ty funkce vyvolána kliknutí, to je důvod, proč bych chtěl zasahovat do něj co nejméně.

Tak nějak jsem pochopil, že javascript location = 'some_new_url' nerovná ajax volání, takže není nic, co čekat, a asi proto, že mám dost rychlé PC - 2. žádost je také vystřelil, než ve skutečnosti navigaci na nové stránky.

Otázka: jak se tomuto chování vyhnout a provést přesměrování hned bez dalšího spuštění kódu?

Tyto funkce:

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));

let ajaxWorking = true;

$(document).ajaxStop(function() {ajaxWorking = false;});

async function waitForRequestsDone() {
    ajaxWorking = true;
    let i=0;
    while (ajaxWorking) {await sleep(50); i++; if(i>40) {break;}}
}

Úryvek z jednoho z těch, klepněte na tlačítko funkce (zjednodušená, další je stejné, podle funkce):

$(document).delegate('#button-shipping-method', 'click', function () {
        $.ajax({
            url: 'some_url',
            type: 'post',
            data: some_data,
            success: function (json) {
                if (json['redirect']) {
                    location = json['redirect'];
                }

Question 2

Spíše než volání prvek.klepněte na tlačítko(), nepoužívejte anonymní funkce a zavolat handler přímo, tj.:

const shippingHandler = () => //Do stuff
$(#button-shipping-method).onClick(shippingHandler)

 $(document).on('click', 'input[name="shipping_method"]', async function () {
    await shippingHandler();
});

Pak, pokud přepravní handler chyby, přesměrování a nikdy vyřešit.

score 0 · Answer 1 · 2021-11-23T11:25:00

Spíše než volání prvek.klepněte na tlačítko(), nepoužívejte anonymní funkce a zavolat handler přímo, tj.:

const shippingHandler = () => //Do stuff
$(#button-shipping-method).onClick(shippingHandler)

 $(document).on('click', 'input[name="shipping_method"]', async function () {
    await shippingHandler();
});

Pak, pokud přepravní handler chyby, přesměrování a nikdy vyřešit.

$(#button-shipping-method).onClick(shippingHandler) - bude to práce na dynamicky vytvořené prvky?
Aniž by věděl, že vstupy a výstupy z vašeho kódu, nevidím důvod, proč to nebude fungovat na dynamicky vytvořené prvky. Prosím, mějte na paměti, i když, co jsem napsal výše, je v podstatě pseudo kód, a onClick by měl být změněn, aby však můžete přidat posluchače událostí!

Javascript: location = něco uvnitř asynchronní funkce způsobuje, že nadále předtím, než skutečně mění polohu

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii