在 Javascript 中是否有类似 "afterChange" 的事件而不是 "change"？

Question

我正在尝试使 Plotly 图表中 X 轴和 Y 轴的源数据在用户从对应于特定轴的下拉列表中选择一个值时自动更新。

事件侦听器中存在问题（以下代码的最后两行）：

function restyle(chart_div, update_data) {
            console.log(update_data.x);
            Plotly.restyle(chart_div, update_data);

    };

var update_data = {
    x: [columns[controls.x_axis_dropdown.value]], 
    y: [columns[controls.y_axis_dropdown.value]], 
};

controls['x_axis_dropdown'].addEventListener("change", function(){restyle(chart_div, update_data)});
controls['y_axis_dropdown'].addEventListener("change", function(){restyle(chart_div, update_data)});

问题是，目前每当用户更改下拉值时，restyle 函数都会在下拉值确实更改之前被调用。因此，图表保持不变。

如何在更改下拉值后调用 restyle 函数？因此，我需要 "afterChange" 事件而不是事件侦听器上的 "change" 事件。

Answer 1

也许您需要直接从下拉元素中获取值。使用调用回调函数的事件对象来检索目标元素的相关值。

controls['y_axis_dropdown'].addEventListener("change", function(event){
    const update_data = event.target.whatever_data;
    restyle(chart_div, update_data)
});

Answer 2

你的问题应该出在这部分

var update_data = {
    x: [columns[controls.x_axis_dropdown.value]], 
    y: [columns[controls.y_axis_dropdown.value]], 
};

x 和 y 值是常数，因为更新只设置一次

尝试将您的代码更改为：

function restyle(chart_div) {
      var update_data = {
           x: [columns[controls.x_axis_dropdown.value]], 
           y: [columns[controls.y_axis_dropdown.value]], 
       };
            console.log(update_data.x);
            Plotly.restyle(chart_div, update_data);

    };

controls['x_axis_dropdown'].addEventListener("change", function(){restyle(chart_div)});
controls['y_axis_dropdown'].addEventListener("change", function(){restyle(chart_div)});

Answer 3

我最终使用了超时，效果很好：

document.addEventListener("change", function(e) {
  /*
   * We use a timeout here to simulate an "afterChange" event.
   * This allows us to read directly from the DOM instead of
   * having to read from the event, which would require a lengthier code
   * to account for all elements we might want to read.
   */
  setTimeout(function() {
    // Do something after change.
  }, 100);
});

在 Javascript 中是否有类似 "afterChange" 的事件而不是 "change"？

Is there something like "afterChange" event instead of "change" in Javascript?

javascript

plotly

plotly.js