Есть ли что-то вроде "afterChange" вместо "change" в Javascript?

Question

Я пытаюсь сделать исходные данные для осей X и Y в диаграмме Plotly автоматически обновляющимися каждый раз, когда пользователь выбирает значение из выпадающего списка, соответствующего конкретной оси.

Проблема в прослушивателях событий (последние две строки кода ниже):

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 функция вызывается после изменения выпадающего значения? Таким образом, вместо события "change" для прослушивателей событий мне нужно что-то вроде "afterChange".

Answer 1

Ваша проблема должна быть с этой частью

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 2

Возможно, вам нужно получить значение непосредственно из выпадающего элемента. Используйте объект события, с которым вызывается функция обратного вызова, чтобы получить соответствующее значение целевого элемента.

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

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