JavaScript/jQuery 中如何将光标设置为等待状态

在网页开发中，当执行一些耗时操作时，将光标设置为等待状态是提升用户体验的重要手段。通过 JavaScript 和 jQuery 都能轻松实现这一功能。

JavaScript 实现光标等待状态

在 JavaScript 中，主要通过修改元素的 cursor CSS 属性来改变光标的外观。当要将光标设置为等待状态时，我们将 cursor 属性值设为 'wait'。

假设页面中有一个按钮，点击按钮后会执行一个模拟的耗时操作，同时将光标设置为等待状态。首先获取要操作的元素，比如按钮元素：

const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function () {
    // 将页面的光标设置为等待状态
    document.body.style.cursor = 'wait';
    // 模拟耗时操作
    setTimeout(() => {
        // 操作完成后将光标恢复正常
        document.body.style.cursor = 'default';
    }, 3000);
});

在这段代码中，点击按钮后，立即将 document.body 的 cursor 属性设为 'wait'，让整个页面的光标变为等待状态。在模拟的耗时操作（这里使用 setTimeout 模拟 3 秒的操作）完成后，再将光标恢复为默认状态 'default'。

jQuery 实现光标等待状态

使用 jQuery 实现同样的功能也非常简便。jQuery 提供了更简洁的语法来操作 DOM 元素和修改样式。 首先要确保页面引入了 jQuery 库。同样以按钮点击操作为例：

$(document).ready(function () {
    $('#myButton').click(function () {
        // 将页面的光标设置为等待状态
        $('body').css('cursor', 'wait');
        setTimeout(() => {
            // 操作完成后将光标恢复正常
            $('body').css('cursor', 'default');
        }, 3000);
    });
});

在这段 jQuery 代码中，$(document).ready() 确保页面加载完成后才执行代码。点击按钮时，通过 $('body').css('cursor', 'wait') 将光标设为等待状态，操作结束后再通过 $('body').css('cursor', 'default') 恢复正常。

无论是 JavaScript 还是 jQuery，将光标设置为等待状态都能有效告知用户系统正在忙碌，避免用户因长时间无响应而产生困惑或误操作。开发者可以根据项目实际情况选择合适的方式来实现这一功能，提升用户在网页交互过程中的体验。