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

我有五个过滤器（多个选择），它们过滤仪表板中五个可视化背后的数据。过滤器有一个jquerychange事件，但此事件中的第一行代码需要半秒钟的时间。我不明白为什么会耽搁。如果在第一行代码之后删除代码，延迟就会消失。这就好像代码没有按顺序运行一样

第一行代码的目的是在运行更新代码之前，使五个“模糊”（半透明）div可见，以模糊图形

我在selects上使用selected.js，但即使删除selected，仍然会有延迟。过滤器是动态构建的。以下是添加更改事件的代码：

  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();

  })
  }

---

对于（i=0；i嗯，我得承认你有一个奇怪的bug

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

您可以设法使用承诺，但
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.
    })
}

for（i=0；i什么导致淡入淡出效果？它只是一个div，css声明为：background:rgba（255255,0.8）
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.
    })
}