javascript - 如何减少 javascript/jquery 更改事件的延迟？

Question

我有五个过滤器(多个选择)，它们过滤仪表板中五个可视化背后的数据。过滤器有一个 JQuery 更改事件，但该事件中的第一行代码需要半秒才能发生。我不明白为什么有延迟。如果我删除第一行代码之后的代码，延迟就会消失。就好像代码没有按顺序运行。

第一行代码的目的是使五个“模糊”(半不透明)div 可见，以遮挡图形，直到更新代码运行。

我在选择上使用了 selected.js，但即使我删除了选择，仍然有延迟。过滤器是动态构建的。这是添加更改事件的代码:

  for (i=0; i<filters0Length; i++) {
  $("[id='"+filters[0][i]+"']").on('change',function(e,p){

    d3.selectAll("div.misty").style("visibility","visible");//make the fade divs appear - takes half a second

    if (!p) {
      for (var j=0; j<filters[0].length; j++) { filters[6][j] = []; filters[5][j].filterAll(); }

    } else {

      if (p.selected) {
        var tempIndex = filters[0].indexOf(e.target.id);//whether it's company, portfolio, industry or country
        filters[6][tempIndex].push(p.selected);//store this filter
        filters[5][tempIndex].filterFunction(function(d){ return filters[6][tempIndex].indexOf(d)!=-1; });
      }
      if (p.deselected) {
        var tempIndex = filters[0].indexOf(e.target.id);//whether it's company, portfolio, industry or country
        var tempIndex2 = filters[6][tempIndex].indexOf(String(p.deselected));

        filters[6][tempIndex].splice(tempIndex2,1);
        filters[5][tempIndex].filterAll();
        if (filters[6][tempIndex].length>0) { filters[5][tempIndex].filterFunction(function(d){ return filters[6][tempIndex].indexOf(d)!=-1; }); }
        window.portfolio_p = window.portfolio_p2;
      }

    }



    update();

  })
  }

如果我删除更新命令，代码运行速度会更快:

  for (i=0; i<filters0Length; i++) {
  $("[id='"+filters[0][i]+"']").on('change',function(e,p){

    d3.selectAll("div.misty").style("visibility","visible");//make the fade divs appear - takes half a second

  }

Answer 1

嗯，我不得不承认你有一个奇怪的错误。

我所能建议的就是将过滤器操作推送到稍后的事件线程中。

您可以设法使用 Promise，但 window.setTimeout() 成本较低。

for(i=0; i<filters0Length; i++) {
    $("[id='"+filters[0][i]+"']").on('change', function(e, p) {
        d3.selectAll('div.misty').style('visibility', 'visible');
        window.setTimeout(function() {
            if (!p) {
                // etc...
            } else {
                // etc...
            }
            update();
        }, 0); // in practice the delay will be something like 15 ms.
    })
}