如何减少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.
    })
}