javascript - 如何让 d3.js 中的光标在我想要的时候改变？

Question

这是一个与 Basic Javascript loading message while js processing completes 相关的问题

我的主要问题是，在调用我的两个函数drawlegend()和display()之前，光标没有改变，但在一切完成后发生变化。使用下面的代码，其中临时注释掉光标的恢复，我得到了沙漏，但在一切都完成之后。

如何在调用慢速函数之前让光标变为沙漏？

examplefunc()
{
   mini.append("text")
    .text(series[i].name)
    .attr("x",30)
    .attr("y",(15+(15*i)))
    .attr("stroke",(d3.rgb(192,192,192)))
    .attr("fill",(d3.rgb(192,192,192)))
    .attr("stroke-width",0)
    .style("font-size","12px")
    .attr("text-anchor","start")
    .attr("id","legend")
    .on('mouseup', legendclick);
}

//===== legend clicked
function legendclick()
{
   //--- get mouse pos
   var origin = d3.mouse(this);

   //---  get channel
   var ch=Math.floor((origin[1]-4)/15);

   //--- toggle active state
   if (series[ch].active==true)
      series[ch].active=false;
   else
      series[ch].active=true;

   setTimeout(setcursor("wait"),5);         
   drawlegend();
   display();
   //setTimeout(setcursor("default"),5); // temp removed to see any result at all
 }

//===== set cursor
function setcursor(cursor)
{
  d3.select("body").style("cursor", cursor);
}

Answer 1

众所周知，在 JavaScript 中执行操作会挂起您的应用程序。这意味着屏幕上仅显示最终输出。因此，当您将光标更改为“wait”并在执行后更改为“cursor”时，javascript并没有更改它，因为ui线程正忙于计算函数“drawlegend”和“display”中的内容。但是，我认为当您异步执行“drawlegend”和“display”时，就像

setTimeout(function () {
        drawLegend();
        display();
        setcursor("default");
}, 0);

那么事情就会如你所愿。让我知道这是否适合您。

额外信息:关于this slideshare (尤其是幻灯片 5)解释了您的问题是什么。