在javascript函数运行时将光标更改为等待符号

时间:2014-05-16 14:33:51

标签: javascript jquery html css

知道如何将光标更改为等待符号(小时玻璃/死亡圈),但在javascript运行完成之前它不会注册。我尝试将一个类添加到html

在js

 $("html").addClass("waiting");

在css

 html.waiting
 {
    cursor:wait;
 }

这是有效的,但就像我说的那样,直到js完成运行后才有这样的代码

 $("html").addClass("waiting");
 foobarFunctionCall();
 $("html").removeClass("waiting");

非常没用,因为它在开启之前就已关闭。

我也尝试过直接做

 $("html").css("cursor", "wait");

有效,但直到js完成后才运行,就像其他方法一样。所以它也毫无价值。

在js运行时是否有任何可以更新游标属性的函数调用,这样即使在js运行时也会注册?

其他重要/相关信息 - >当使用jquery单击div并且函数处于嵌套回调函数时,上面显示的js运行

 $(document).ready(function () 
 {
       $('.buttonDiv').on('click',function()
            {
                $("html").addClass("waiting");
                foobarFunctionCall();
                $("html").removeClass("waiting");
            });
 }    

注意 - >这不是我的实际代码,而是与所有其他不相关的东西相同的方法/概念,以简化/减少混淆。

有人有任何解决方案吗?我的功能可能需要一段时间(约10秒),具体取决于按下哪个按钮,这就是为什么这是非常必要的。

我猜它是因为它是一个回调函数,但必须有一种方法可以让它发挥作用。

感谢任何帮助,非常感谢!!

<小时/>

对评论的回应

add / remove类事件实际上是在函数调用中我为了简单起见而把它拿出来。我认为PA和Halcyon是对的。它是在java脚本之后重新绘制,但我不确定如何在java脚本中执行它,因为我没有专门绘制任何内容的代码。它是所有附加/删除/更改html元素或更改css属性/添加类,这些都是在专门执行该操作的代码行完成时完成的,这就是为什么我真的很困惑。那些应该像光标变化那样等待。我的项目是一个时间轴,可以动态更新自己从文件中读取的内容,所讨论的功能是放大和缩小。这些都不在我仅使用body,ul,li,div,h4,p,br的svg元素中。我想知道是否可以单独更新body或html元素。我想这可能是因为按钮在按钮上方时将光标更改为手指指针,并且html认为它仍然在按钮上,直到代码执行但我不确定,因为当你在html上更改光标时把光标改成每件事。

让我稍微分解缩放功能: 缩放功能仅更改时间轴元素(数据,线条和比例)左对齐的距离,因此缩小会使左边的属性变小,放大会使左边的属性变大。时间刻度div(实际行上的时间元素)实际上被移除并重新附加以使其一次在屏幕上有X数字。线条的宽度会发生变化。最后,数据点的左侧属性以及它们的弹出式div(单击时)都会发生变化。所有这一切在函数内部都有效,只要执行该行(与总显示器ex数据点左侧属性的一小部分相关的特定行被更改)。

@david - 是的,我同意这会有效,但我需要其他东西是互动的,因为他们的点击功能才能正常工作。也许我应该添加一些在加载更改时出现的文本并忽略整个游标更改。

好吧,我刚刚尝试了加载文本的想法,当我在调试器中逐步执行代码时,它可以工作,但是当我在没有踩到它的情况下测试它时。我猜测我尝试做的事情是不可能的,因为它会等待所有的jquery调用完成并且一旦完成就改变屏幕,所以它试图做1 + -1所有这些都没有变化。

任何人都知道如何在完成功能之前特别要求它添加内容?

2 个答案:

答案 0 :(得分:1)

好吧,伙计们,我想出了如何解决自己的问题。因为我正在使用jquery回调(

 $("div_button").on("click",function()
      {
           blahhh....
      });

在回调完成之前不会更新屏幕(除非由于某种原因在调试器中单步执行),所以通过添加和删除相同的东西或将光标设置为样式然后将其设置回不同的在显示之前将其自行撤消。让这个工作的技巧是单独回调设置加载设置然后在正常的点击/鼠标上事件回调函数结束时删除它们(因为点击需要鼠标上下,它总是追赶);

所以我需要添加一个单独的处理程序,见下面的

 $("div_button").on("mousedown",function()
      {

           setUpLoadingDisplay();
      });
 //note just using .on("mousedown",setUpLoadingDisplay()); doesn't work for some reason 
 //     ->i guess it's not used like a call back in that case

 // and then i have my normal click or mouseUp event handler

 $("div_button").on("mouseup" [or "click"],function()
      {

           foobarFunctionCall();
           removeLoadingDisplay();
      });

感谢您的帮助。我知道我自己想出来了,但你的意见是我带领的原因。

答案 1 :(得分:0)

Javascript是异步的,意味着函数启动,调用函数继续执行。您将要将removeClass()放在函数的最后一行。