当再次调用相同的函数时退出javascript函数

Question

在我的网站中，我首先调用一个javascript函数，使用户可以更改我网站上特定元素的布局。然后，当用户更改下拉列表的值时，将调用相同的javascript函数，但用户应更改他选择的新元素的布局。

问题是第一个函数保持活动状态，因此它们都会继续执行。这意味着用户然后更改第一个元素和第二个元素的布局（仅当第二个元素应该更改时）

代码提取：

//Called function in page load
general_layout_changes(chart_variables);

//Called function when dropbox value changes
$(document).on('change', '.report_item_choosen', function(){
    general_layout_changes(chart_variables);
});

//Part of the function
function general_layout_changes(chart_variables){
        $(document).on('keyup', '.change-text-x-label', function() {
            var changeText = $( this ).val();
            var svg = d3.select("#" + chart_variables.chart_id_name + "_content").transition();

            svg.select("text.x-label")  
                .text(changeText);  
        });
}

Answer 1

您在general_layout_changes函数的每次调用中，同一元素上的多次 相同的事件监听器：绑定另一个事件监听器。

您可以替换此处提供的整个代码：

$(document).on('keyup', '.change-text-x-label', function() {
    var changeText = $( this ).val();
    var svg = d3.select("#" + chart_variables.chart_id_name + "_content").transition();
    svg.select("text.x-label").text(changeText);
});

这样做会更好，但更好，因为它只会绑定事件一次。