javascript - 将光标更改为在发送 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

当您发出非异步请求时，您不能这样做。

除了你的小错误(你需要使用=分配新值给cursor，它不是一个函数)。

同步请求阻止事件循环(这就是它们被弃用的原因)。由于事件循环被阻止，浏览器不会执行重绘，光标也不会改变。

改为编写异步代码。

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';
        }
    });
}