从javascript更改html文档的光标类型

时间:2009-03-12 20:19:29

标签: javascript html cursor

假设我有一个javascript方法需要花费很长时间才能完成,而根本没有任何用户反馈。在我的情况下,它是对表元素中的行进行排序(所有在DOM中;如果有行,则只需要太长时间),但它可能会做任何事情。我想在运行时显示“进度”光标。这是我目前所拥有的,但我也尝试了其他几个方面:

// SORT   
document.body.style.cursor = "progress";
MyLongRunningMethod(); //blocks for 10-15 seconds before returning
document.body.style.cursor = "auto";    

不幸的是,没有任何反应。 MyLongRunningMethod()正确地做到了,但光标永远不会改变。我的想法是浏览器需要等待返回的方法才能处理窗口环境生成的光标更改消息,但这可能是关闭的,即使它是真的我不知道如何解决它。

还有其他想法吗?


[编辑]:我决定我所有的背景故事并不是真的有必要。如果您真的想阅读它,请查看修订历史记录。


最终结果

我最终使用了RoBorg的解决方案。它并没有像我最初想的那样搞乱代码,因为我可以将函数声明保存在那里 - 就像添加内联作用域一样。

有趣的是,在Firefox上我发现这意味着我根本不需要更改光标。我发现在添加setTimeout调用后,我有时会在设置进度游标之前看到等待光标显示,所以我注释掉了我的游标代码。事实证明,使用setTimeout将其推出click事件处理程序本身允许FireFox自己确定游标应该更改。不幸的是,IE并不那么聪明,所以我把光标代码放回去了。

这使我相信光标变化在这里是适当的行动 - 鉴于机会它是浏览器将要做的事情。我真的不想在DOM中添加和删除新项目(如某种类型的繁忙图像)以获取我对此知之甚少的页面。无论页面使用什么视觉设计,脚本都应该匹配。

最后,Chrome让整个事情变得无关紧要。使用相同的数据,Chrome可以在不到5秒的时间内完成IE和Firefox 10到15秒的完成。所以他们的javascript引擎确实更快。我等不及Firefox 3.1引擎了。不幸的是,这里的人们仍然主要使用IE6。

3 个答案:

答案 0 :(得分:9)

使用计时器是不可能的?

document.body.style.cursor = "progress";

setTimeout(function()
{
    SortTable(cell.cellIndex, dir, sortType);
    document.body.style.cursor = "auto";
}, 10);

答案 1 :(得分:2)

在网络中,更改鼠标光标不是传统的,也不是很好。

在页面本身上使用一些小动画会更好(也更容易),请检查http://www.ajaxload.info/这些图像(它是一个在线生成器)。

答案 2 :(得分:0)

尝试删除document.body.style.cursor =“auto”并将其放入完成SortTable函数时调用的函数中。这样,您将保留忙碌光标,直到该功能完成。如果您在SortTable()中遇到错误情况,请确保仍然按“不再忙”函数调用。