Изменить курсор на ожидание перед отправкой петиции Ajax

Question

У меня есть следующая функция JavaScript, которая выполняется при нажатии кнопки:

function calculate(resource) {
    document.getElementById('loading-label').innerHTML = 'Calculating...';
    $.ajax({
        url: resource,
        type: 'GET',
        async: false,
        headers: {
            'Content-Type': 'application/json'
        },
        beforeSend: function () {
            document.body.style.cursor('wait');
        },
        complete: function () {
            document.body.style.cursor('default');
        }
    }).done(function (data, textStatus, jqXHR) {
        if (data == true) {
            document.getElementById('loading-label').innerHTML = 'Done!';
            document.getElementById('loading-label').style.color = 'green';
        } else {
            document.getElementById('loading-label').innerHTML = 'Error!';
            document.getElementById('loading-label').style.color = 'red';
        }
    });
}

Но она не работает так, как я хочу. Возможно, потому что я не использую обратные вызовы beforeSend и complete.

Как видно, при нажатии кнопки метка меняет свое содержимое, и я хотел бы изменить курсор на ожидание до завершения синхронного вызова (и затем возврат к по умолчанию ). Как я мог это сделать?

Answer 1

Вы не можете, когда делаете не асинхронный c запрос.

Помимо вашей тривиальной ошибки (вам нужно назначить новые значения для cursor с =, это не функция).

Синхронные запросы блокируют событие l oop (именно поэтому они устарели). Поскольку событие l oop заблокировано, браузер не выполняет перерисовку и курсор не меняется.

Вместо этого пишите асинхронный код.

function calculate(resource) {
    document.getElementById('loading-label').innerHTML = 'Calculating...';
    document.body.style.cursor = 'wait';
    $.ajax({
        url: resource,
    }).done(function (data, textStatus, jqXHR) {
        if (data == true) {
            document.getElementById('loading-label').innerHTML = 'Done!';
            document.getElementById('loading-label').style.color = 'green';
            document.body.style.cursor = 'default';
        } else {
            document.getElementById('loading-label').innerHTML = 'Error!';
            document.getElementById('loading-label').style.color = 'red';
            document.body.style.cursor = 'default';
        }
    });
}