Есть ли что-то вроде «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)
});